Creator · crafter-station
Last updated · Sep 4, 2026
Generate OG images and favicon based on project branding. Use when: (1) user needs social media preview images for their project, (2) user wants to generate a favicon, (3) user is setting up branding assets for a website or app, (4) user has brand colors and wants professional-lo
Creator · crafter-station
Last updated · Sep 4, 2026
Generate OG images and favicon based on project branding. Use when: (1) user needs social media preview images for their project, (2) user wants to generate a favicon, (3) user is setting up branding assets for a website or app, (4) user has brand colors and wants professional-lo
Creator · crafter-station
Last updated · Sep 4, 2026
Generate OG images and favicon based on project branding. Use when: (1) user needs social media preview images for their project, (2) user wants to generate a favicon, (3) user is setting up branding assets for a website or app, (4) user has brand colors and wants professional-lo
Creator · crafter-station
Last updated · Sep 4, 2026
Generate OG images and favicon based on project branding. Use when: (1) user needs social media preview images for their project, (2) user wants to generate a favicon, (3) user is setting up branding assets for a website or app, (4) user has brand colors and wants professional-lo
Sandbox only
Install targets
Codex install prompt
Install the "generate-brand-assets" agent skill from https://github.com/crafter-station/skills/tree/main/skills/generate-brand-assets. Read its SKILL.md or equivalent instructions first, install only the files needed for this workspace, and summarize any required setup before using it. Skill purpose: Generate OG images and favicon based on project branding. Use when: (1) user needs social media preview images for their project, (2) user wants to generate a favicon, (3) user is setting up branding assets for a website or app, (4) user has brand colors and wants professional-looking Open Graph images. Automatically generates correctly sized images optimized for social platforms (Twitter, LinkedIn, Facebook) and favicon formats. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {"event_id":"install_<unique-id>","skill_slug":"crafter-station-generate-brand-assets","task":"Install generate-brand-assets","agent":"codex","outcome":"success","install_used":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes.Supply asset profile
Code review, repo analysis, testing, CI, GitHub, DevOps, and developer workflow skills.
Scenario
Testing and QA
I need my agent to test a web app, reproduce bugs, and verify fixes.
Agent fit
Claude Code + Browser agents + CLI
Codex, Claude Code, Cursor, CLI, or custom agents.
Install
Ready
npx skills add crafter-station/skills --skill generate-brand-assets
Maintenance
fresh
5d since push
Risk
Needs review
Permission surface may require sandboxing
GitHub quality
111
67/100 Quality · 76/100 Trust
Coverage tags
Review notes
Permission surface may require sandboxing · Financial research output is not financial advice; require human review before any live investment decision
Agent adoption scorecard
These scores combine public repository metadata, OpenAgentSkill review signals, maintenance freshness, and install readiness. They are a shortlist signal, not a replacement for human review.
Quality
PromisingUseful candidate, but compare it with alternatives before adopting.
Trust
Sandbox onlyUseful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
Audit
Needs reviewA machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
OpenAgentSkill Trust Score v5
Run only in a sandbox and compare close alternatives before using it for real work.
Stars
111 GitHub stars
Repo activity
111 stars, 15 forks
Maintenance
5d since push
License
MIT
Install
npx skills add crafter-station/skills --skill generate-brand-assets
Install safety
Agent-readable metadata
Use this block or the embedded JSON to decide whether an agent should install this skill, choose an alternative, or ask for human review first.
Suited tasks
Suited agents
Install decision
Trust and risk
Outcome loop
Install command
npx skills add crafter-station/skills --skill generate-brand-assetsDo not use when
Alternative
175.1K Stars
npx skills add anthropics/skills --skill frontend-design
Alternative
85.2K Stars
npx skills add Leonxlnx/taste-skill --skill design-taste-frontend
Alternative
1.8K Stars
npx skills add Alisa0808/vox-director --skill vox-director
Alternative
175.1K Stars
npx skills add anthropics/skills --skill canvas-design
Agent safety v2
Sparse or mixed signals. Useful for discovery, but not for autonomous installation.
Test manually in an isolated workspace and compare against safer alternatives.
high
Skill metadata references terminal, CLI, shell, subprocess, or command execution workflows.
medium
Skill may drive a browser or interact with web pages.
medium
Skill likely fetches remote pages, APIs, repositories, or external services.
medium
Skill may read or write project files, documents, generated artifacts, or local workspace state.
Agent resolve plan
The Resolve API returns the selected skill, alternatives, safety policy, audit notes, install target, and copy-paste prompt an agent can follow without scraping this page.
Open JSON
/api/agent/resolve?task=Use%20generate-brand-assets%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Resolve text
/api/agent/resolve?task=Use%20generate-brand-assets%20for%20an%20agent%20workflow&agent=codex&max_risk=medium&format=text
Install handoff
/api/skills/crafter-station-generate-brand-assets/install
Agent should check
Copy prompt
Task: Use generate-brand-assets in this workspace.
Resolve first: https://www.openagentskill.com/api/agent/resolve?task=Use%20generate-brand-assets%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Review install handoff: https://www.openagentskill.com/api/skills/crafter-station-generate-brand-assets/install
Install command: npx skills add crafter-station/skills --skill generate-brand-assets
Before running it, summarize audit warnings, required permissions, and the fallback skill if install is risky.Agent handoff
Use the public install endpoint to fetch the command, safety checklist, target prompts, and canonical links for this skill.
Install handoff
/api/skills/crafter-station-generate-brand-assets/install
LLM text format
/api/skills/crafter-station-generate-brand-assets/install?format=text
Find alternatives
/api/skills/search?q=generate-brand-assets&limit=3
Agent prompt
Use generate-brand-assets for this task. Review https://www.openagentskill.com/api/skills/crafter-station-generate-brand-assets/install, then install with: npx skills add crafter-station/skills --skill generate-brand-assetsRegistry metadata
This page exposes the same decision, trust, audit, use-case, and install signals through the Registry API, so agents can rank this skill without scraping the UI.
Manifest
/api/registry/manifest/crafter-station-generate-brand-assets
LLM text
/api/registry/manifest/crafter-station-generate-brand-assets?format=text
Install alias
/api/registry/install/crafter-station-generate-brand-assets
Recommend
/api/registry/recommend?task=Use%20generate-brand-assets%20in%20an%20agent%20workflow&limit=3
Agent fit
Browser automation
Use-case tags
Platforms
Claude Code, Browser agents
Audit report
A machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
Agent decision cockpit
Prototype with this skill first; keep a fallback candidate ready.
Role in stack
Fallback candidate
Primary fit
Browser automation
Trust label
Prototype first
Install path
Command ready
Use when
Evidence
review first
Implementation path
Trust profile
Useful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
GitHub adoption
INFO111 GitHub stars
Stars/forks activity
CHECK111 stars, 15 forks; issue activity unavailable in current metadata
Recent maintenance
PASS5d since push
License clarity
PASSMIT
Good signals
Review before install
Recommended action
Run only in a sandbox and compare close alternatives before using it for real work.
Quality profile
Useful candidate, but compare it with alternatives before adopting.
Workflow fit
Operate web apps
I need my agent to control a browser, fill forms, and verify web app workflows.
Verify behavior
I need my agent to test a web app, reproduce bugs, and verify fixes.
Create assets
I need my agent to produce design assets, UI directions, presentations, or creative media workflows.
Workflow fit
Design, build, test, and ship interfaces
A practical workflow for agents that turn product briefs or Figma designs into polished frontend code, review the result, test it in a browser, and prepare a safe deployment.
Turn skills into distribution
A workflow for turning newly indexed skills into SEO briefs, social drafts, comparison pages, and reusable publishing workflows.
Operate and verify web apps
A workflow for agents that navigate products, fill forms, take screenshots, and verify real user flows across web applications.
Alternative shortlist
Similar skills that may fit this task.
Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.
Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.
Turn one topic into a narrated Vox-style paper-collage explainer or ad video, from script through captions.
Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.
--- name: generate-brand-assets version: 1.0.0 description: | Generate OG images and favicon based on project branding. Use when: (1) user needs social media preview images for their project, (2) user wants to generate a favicon, (3) user is setting up branding assets for a website or app, (4) user has brand colors and wants professional-looking Open Graph images. Automatically generates correctly sized images optimized for social platforms (Twitter, LinkedIn, Facebook) and favicon formats. ---
# generate-brand-assets
Generate branded OG (Open Graph) images and favicons for your project based on brand colors and identity.
## Prerequisites
Check if you have the necessary tools:
```bash node --version # Node.js 16+ ```
The skill uses built-in image generation capabilities. No additional dependencies required beyond Node.js.
## What It Generates
- **OG Images**: 1200×630px preview images for social media sharing (Twitter, LinkedIn, Facebook) - **Favicon**: Multiple formats (16×16, 32×32, 64×64, 192×192, 512×512) and iOS touch icons - **Manifest Icons**: Web app manifest-compatible icons - **Optimized**: WebP, PNG, and ICO formats for maximum compatibility
## Workflow
### 1. Identify Brand Colors
Ask the user for their brand colors. Typical palette includes: - Primary color (hex: `#RRGGBB`) - Accent color (optional) - Text color (typically `#000000` or `#FFFFFF` for contrast) - Background patterns (optional)
### 2. Gather Project Details
Collect information for the OG images: - Project name - Tagline or description (1-2 lines) - Logo path or text-based logo preference
### 3. Generate Assets
Command structure:
```bash npx generate-brand-assets \ --name "Your Project Name" \ --tagline "Brief project description" \ --primary-color "#3B82F6" \ --accent-color "#1E40AF" \ --output-dir ./public/brand-assets ```
### 4. Customization Options
| Option | Example | Purpose | |--------|---------|---------| | `--name` | "My Project" | Project name for OG images | | `--tagline` | "Build faster" | Subtitle/description on images | | `--primary-color` | "#3B82F6" | Main brand color | | `--accent-color` | "#1E40AF" | Secondary brand color | | `--text-color` | "#FFFFFF" | Text contrast color | | `--logo-path` | "./logo.png" | Custom logo file | | `--pattern` | "dots" \| "grid" | Background pattern style | | `--output-dir` | "./public" | Where to save generated assets | | `--format` | "png,webp,ico" | Image formats to generate |
### 5. Integration
**For Next.js/React projects:**
```jsx // next.config.js or next-seo.config.js { openGraph: { images: [ { url: '/brand-assets/og-image.png', width: 1200, height: 630, } ] }, icons: { icon: '/brand-assets/favicon.ico', apple: '/brand-assets/apple-touch-icon.png' } } ```
**For HTML projects:**
```html <!-- index.html --> <meta property="og:image" content="/brand-assets/og-image.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <link rel="icon" href="/brand-assets/favicon.ico" /> <link rel="apple-touch-icon" href="/brand-assets/apple-touch-icon.png" /> ```
### 6. Verification
Test generated images:
```bash # Check file sizes and formats ls -lh ./public/brand-assets/
# Preview in browser open ./public/brand-assets/og-image.png ```
Test social preview: - Use [Twitter Card Validator](https://cards-dev.twitter.com/validator) - Use [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/sharing) - Use [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/)
### 7. Report Results
Provide the user with: - List of generated files with dimensions - Output directory path - Integration instructions for their framework - Preview links if hosting is set up
## Common Patterns
### Gradient Backgrounds
```bash npx generate-brand-assets \ --name "My App" \ --gradient "from-#3B82F6 to-#1E40AF" \ --text-color "#FFFFFF" ```
### Dark Mode Support
Generate both light and dark variants:
```bash # Light version npx generate-brand-assets --theme light --primary-color "#3B82F6"
# Dark version npx generate-brand-assets --theme dark --primary-color "#60A5FA" ```
### Multiple Locale Variants
For multi-language projects:
```bash npx generate-brand-assets \ --name "My Project" \ --locale es \ --tagline "Construir más rápido" ```
## Troubleshooting
| Issue | Solution | |-------|----------| | Colors look wrong | Verify hex format is exactly `#RRGGBB` (6 chars) | | Text not readable | Ensure sufficient contrast; `text-color` should differ from background by >50% brightness | | Images too large | Use `--optimize` flag to reduce file size (trades some quality) | | Favicon not showing | Clear browser cache and hard-refresh (Cmd+Shift+R / Ctrl+Shift+F5) | | Output directory error | Ensure output directory exists or use `--create-dirs` flag |
## Next Steps
After generating assets: 1. Commit generated files to version control 2. Update social media preview URLs in deployment 3. Test social sharing on each platform (links may cache old images) 4. Monitor OG image performance in analytics
Source provenance
Decision snapshot
recent repository activity
Audit
Install and adoption review
Agent-proven evidence
Outcome reports after resolve, review, install, and one narrow run.
No agent outcome data yet. The first agent run can report success, setup needs, risk blocks, failure, or not-relevant through /api/agent/outcome.
Install
Free and open source. Review the report before installing into production agents.
Growth loop
Scenario-led draft for generate-brand-assets, ready for a manual X post.
generate-brand-assets: Generate OG images and favicon based on project branding. Use when: (1) user needs social med... 111 stars https://www.openagentskill.com/skills/crafter-station-generate-brand-assets?ref=x
Listing + install path for generate-brand-assets: https://www.openagentskill.com/skills/crafter-station-generate-brand-assets?ref=x Install: npx skills add crafter-station/skills --skill generate-brand-assets
Listing source
This listing was indexed from public sources and is not marked official until a maintainer claim is approved.
Attribution links to the public repository or creator profile. Creators can claim the listing to update ownership signals.
Claim this skillOwner claim
This Registry indexed listing is attributed to crafter-station but is not marked official yet. Claim it to add a verified owner signal and make future launch, install, and audit updates easier to trust.
Creator backlink kit
Show the canonical listing, current trust and audit signals, and real Agent-Proven evidence where developers evaluate the repository.
[](https://www.openagentskill.com/skills/crafter-station-generate-brand-assets?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/crafter-station-generate-brand-assets?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/crafter-station-generate-brand-assets/audit)
[](https://www.openagentskill.com/skills/crafter-station-generate-brand-assets?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)crafter-station
@crafter-station
Share whether this skill looks useful for your agent workflow. Aggregated feedback improves rankings over time.
Sandbox only
Frontend Design
Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.
175.1K StarsTaste Skill: Anti-Slop Frontend
Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.
85.2K StarsVox Director
Turn one topic into a narrated Vox-style paper-collage explainer or ad video, from script through captions.
1.8K StarsCanvas Design
Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.
175.1K StarsSandbox only
Install targets
Codex install prompt
Install the "generate-brand-assets" agent skill from https://github.com/crafter-station/skills/tree/main/skills/generate-brand-assets. Read its SKILL.md or equivalent instructions first, install only the files needed for this workspace, and summarize any required setup before using it. Skill purpose: Generate OG images and favicon based on project branding. Use when: (1) user needs social media preview images for their project, (2) user wants to generate a favicon, (3) user is setting up branding assets for a website or app, (4) user has brand colors and wants professional-looking Open Graph images. Automatically generates correctly sized images optimized for social platforms (Twitter, LinkedIn, Facebook) and favicon formats. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {"event_id":"install_<unique-id>","skill_slug":"crafter-station-generate-brand-assets","task":"Install generate-brand-assets","agent":"codex","outcome":"success","install_used":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes.Supply asset profile
Code review, repo analysis, testing, CI, GitHub, DevOps, and developer workflow skills.
Scenario
Testing and QA
I need my agent to test a web app, reproduce bugs, and verify fixes.
Agent fit
Claude Code + Browser agents + CLI
Codex, Claude Code, Cursor, CLI, or custom agents.
Install
Ready
npx skills add crafter-station/skills --skill generate-brand-assets
Maintenance
fresh
5d since push
Risk
Needs review
Permission surface may require sandboxing
GitHub quality
111
67/100 Quality · 76/100 Trust
Coverage tags
Review notes
Permission surface may require sandboxing · Financial research output is not financial advice; require human review before any live investment decision
Agent adoption scorecard
These scores combine public repository metadata, OpenAgentSkill review signals, maintenance freshness, and install readiness. They are a shortlist signal, not a replacement for human review.
Quality
PromisingUseful candidate, but compare it with alternatives before adopting.
Trust
Sandbox onlyUseful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
Audit
Needs reviewA machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
OpenAgentSkill Trust Score v5
Run only in a sandbox and compare close alternatives before using it for real work.
Stars
111 GitHub stars
Repo activity
111 stars, 15 forks
Maintenance
5d since push
License
MIT
Install
npx skills add crafter-station/skills --skill generate-brand-assets
Install safety
Agent-readable metadata
Use this block or the embedded JSON to decide whether an agent should install this skill, choose an alternative, or ask for human review first.
Suited tasks
Suited agents
Install decision
Trust and risk
Outcome loop
Install command
npx skills add crafter-station/skills --skill generate-brand-assetsDo not use when
Alternative
175.1K Stars
npx skills add anthropics/skills --skill frontend-design
Alternative
85.2K Stars
npx skills add Leonxlnx/taste-skill --skill design-taste-frontend
Alternative
1.8K Stars
npx skills add Alisa0808/vox-director --skill vox-director
Alternative
175.1K Stars
npx skills add anthropics/skills --skill canvas-design
Agent safety v2
Sparse or mixed signals. Useful for discovery, but not for autonomous installation.
Test manually in an isolated workspace and compare against safer alternatives.
high
Skill metadata references terminal, CLI, shell, subprocess, or command execution workflows.
medium
Skill may drive a browser or interact with web pages.
medium
Skill likely fetches remote pages, APIs, repositories, or external services.
medium
Skill may read or write project files, documents, generated artifacts, or local workspace state.
Agent resolve plan
The Resolve API returns the selected skill, alternatives, safety policy, audit notes, install target, and copy-paste prompt an agent can follow without scraping this page.
Open JSON
/api/agent/resolve?task=Use%20generate-brand-assets%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Resolve text
/api/agent/resolve?task=Use%20generate-brand-assets%20for%20an%20agent%20workflow&agent=codex&max_risk=medium&format=text
Install handoff
/api/skills/crafter-station-generate-brand-assets/install
Agent should check
Copy prompt
Task: Use generate-brand-assets in this workspace.
Resolve first: https://www.openagentskill.com/api/agent/resolve?task=Use%20generate-brand-assets%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Review install handoff: https://www.openagentskill.com/api/skills/crafter-station-generate-brand-assets/install
Install command: npx skills add crafter-station/skills --skill generate-brand-assets
Before running it, summarize audit warnings, required permissions, and the fallback skill if install is risky.Agent handoff
Use the public install endpoint to fetch the command, safety checklist, target prompts, and canonical links for this skill.
Install handoff
/api/skills/crafter-station-generate-brand-assets/install
LLM text format
/api/skills/crafter-station-generate-brand-assets/install?format=text
Find alternatives
/api/skills/search?q=generate-brand-assets&limit=3
Agent prompt
Use generate-brand-assets for this task. Review https://www.openagentskill.com/api/skills/crafter-station-generate-brand-assets/install, then install with: npx skills add crafter-station/skills --skill generate-brand-assetsRegistry metadata
This page exposes the same decision, trust, audit, use-case, and install signals through the Registry API, so agents can rank this skill without scraping the UI.
Manifest
/api/registry/manifest/crafter-station-generate-brand-assets
LLM text
/api/registry/manifest/crafter-station-generate-brand-assets?format=text
Install alias
/api/registry/install/crafter-station-generate-brand-assets
Recommend
/api/registry/recommend?task=Use%20generate-brand-assets%20in%20an%20agent%20workflow&limit=3
Agent fit
Browser automation
Use-case tags
Platforms
Claude Code, Browser agents
Audit report
A machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
Agent decision cockpit
Prototype with this skill first; keep a fallback candidate ready.
Role in stack
Fallback candidate
Primary fit
Browser automation
Trust label
Prototype first
Install path
Command ready
Use when
Evidence
review first
Implementation path
Trust profile
Useful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
GitHub adoption
INFO111 GitHub stars
Stars/forks activity
CHECK111 stars, 15 forks; issue activity unavailable in current metadata
Recent maintenance
PASS5d since push
License clarity
PASSMIT
Good signals
Review before install
Recommended action
Run only in a sandbox and compare close alternatives before using it for real work.
Quality profile
Useful candidate, but compare it with alternatives before adopting.
Workflow fit
Operate web apps
I need my agent to control a browser, fill forms, and verify web app workflows.
Verify behavior
I need my agent to test a web app, reproduce bugs, and verify fixes.
Create assets
I need my agent to produce design assets, UI directions, presentations, or creative media workflows.
Workflow fit
Design, build, test, and ship interfaces
A practical workflow for agents that turn product briefs or Figma designs into polished frontend code, review the result, test it in a browser, and prepare a safe deployment.
Turn skills into distribution
A workflow for turning newly indexed skills into SEO briefs, social drafts, comparison pages, and reusable publishing workflows.
Operate and verify web apps
A workflow for agents that navigate products, fill forms, take screenshots, and verify real user flows across web applications.
Alternative shortlist
Similar skills that may fit this task.
Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.
Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.
Turn one topic into a narrated Vox-style paper-collage explainer or ad video, from script through captions.
Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.
--- name: generate-brand-assets version: 1.0.0 description: | Generate OG images and favicon based on project branding. Use when: (1) user needs social media preview images for their project, (2) user wants to generate a favicon, (3) user is setting up branding assets for a website or app, (4) user has brand colors and wants professional-looking Open Graph images. Automatically generates correctly sized images optimized for social platforms (Twitter, LinkedIn, Facebook) and favicon formats. ---
# generate-brand-assets
Generate branded OG (Open Graph) images and favicons for your project based on brand colors and identity.
## Prerequisites
Check if you have the necessary tools:
```bash node --version # Node.js 16+ ```
The skill uses built-in image generation capabilities. No additional dependencies required beyond Node.js.
## What It Generates
- **OG Images**: 1200×630px preview images for social media sharing (Twitter, LinkedIn, Facebook) - **Favicon**: Multiple formats (16×16, 32×32, 64×64, 192×192, 512×512) and iOS touch icons - **Manifest Icons**: Web app manifest-compatible icons - **Optimized**: WebP, PNG, and ICO formats for maximum compatibility
## Workflow
### 1. Identify Brand Colors
Ask the user for their brand colors. Typical palette includes: - Primary color (hex: `#RRGGBB`) - Accent color (optional) - Text color (typically `#000000` or `#FFFFFF` for contrast) - Background patterns (optional)
### 2. Gather Project Details
Collect information for the OG images: - Project name - Tagline or description (1-2 lines) - Logo path or text-based logo preference
### 3. Generate Assets
Command structure:
```bash npx generate-brand-assets \ --name "Your Project Name" \ --tagline "Brief project description" \ --primary-color "#3B82F6" \ --accent-color "#1E40AF" \ --output-dir ./public/brand-assets ```
### 4. Customization Options
| Option | Example | Purpose | |--------|---------|---------| | `--name` | "My Project" | Project name for OG images | | `--tagline` | "Build faster" | Subtitle/description on images | | `--primary-color` | "#3B82F6" | Main brand color | | `--accent-color` | "#1E40AF" | Secondary brand color | | `--text-color` | "#FFFFFF" | Text contrast color | | `--logo-path` | "./logo.png" | Custom logo file | | `--pattern` | "dots" \| "grid" | Background pattern style | | `--output-dir` | "./public" | Where to save generated assets | | `--format` | "png,webp,ico" | Image formats to generate |
### 5. Integration
**For Next.js/React projects:**
```jsx // next.config.js or next-seo.config.js { openGraph: { images: [ { url: '/brand-assets/og-image.png', width: 1200, height: 630, } ] }, icons: { icon: '/brand-assets/favicon.ico', apple: '/brand-assets/apple-touch-icon.png' } } ```
**For HTML projects:**
```html <!-- index.html --> <meta property="og:image" content="/brand-assets/og-image.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <link rel="icon" href="/brand-assets/favicon.ico" /> <link rel="apple-touch-icon" href="/brand-assets/apple-touch-icon.png" /> ```
### 6. Verification
Test generated images:
```bash # Check file sizes and formats ls -lh ./public/brand-assets/
# Preview in browser open ./public/brand-assets/og-image.png ```
Test social preview: - Use [Twitter Card Validator](https://cards-dev.twitter.com/validator) - Use [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/sharing) - Use [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/)
### 7. Report Results
Provide the user with: - List of generated files with dimensions - Output directory path - Integration instructions for their framework - Preview links if hosting is set up
## Common Patterns
### Gradient Backgrounds
```bash npx generate-brand-assets \ --name "My App" \ --gradient "from-#3B82F6 to-#1E40AF" \ --text-color "#FFFFFF" ```
### Dark Mode Support
Generate both light and dark variants:
```bash # Light version npx generate-brand-assets --theme light --primary-color "#3B82F6"
# Dark version npx generate-brand-assets --theme dark --primary-color "#60A5FA" ```
### Multiple Locale Variants
For multi-language projects:
```bash npx generate-brand-assets \ --name "My Project" \ --locale es \ --tagline "Construir más rápido" ```
## Troubleshooting
| Issue | Solution | |-------|----------| | Colors look wrong | Verify hex format is exactly `#RRGGBB` (6 chars) | | Text not readable | Ensure sufficient contrast; `text-color` should differ from background by >50% brightness | | Images too large | Use `--optimize` flag to reduce file size (trades some quality) | | Favicon not showing | Clear browser cache and hard-refresh (Cmd+Shift+R / Ctrl+Shift+F5) | | Output directory error | Ensure output directory exists or use `--create-dirs` flag |
## Next Steps
After generating assets: 1. Commit generated files to version control 2. Update social media preview URLs in deployment 3. Test social sharing on each platform (links may cache old images) 4. Monitor OG image performance in analytics
Source provenance
Decision snapshot
recent repository activity
Audit
Install and adoption review
Agent-proven evidence
Outcome reports after resolve, review, install, and one narrow run.
No agent outcome data yet. The first agent run can report success, setup needs, risk blocks, failure, or not-relevant through /api/agent/outcome.
Install
Free and open source. Review the report before installing into production agents.
Growth loop
Scenario-led draft for generate-brand-assets, ready for a manual X post.
generate-brand-assets: Generate OG images and favicon based on project branding. Use when: (1) user needs social med... 111 stars https://www.openagentskill.com/skills/crafter-station-generate-brand-assets?ref=x
Listing + install path for generate-brand-assets: https://www.openagentskill.com/skills/crafter-station-generate-brand-assets?ref=x Install: npx skills add crafter-station/skills --skill generate-brand-assets
Listing source
This listing was indexed from public sources and is not marked official until a maintainer claim is approved.
Attribution links to the public repository or creator profile. Creators can claim the listing to update ownership signals.
Claim this skillOwner claim
This Registry indexed listing is attributed to crafter-station but is not marked official yet. Claim it to add a verified owner signal and make future launch, install, and audit updates easier to trust.
Creator backlink kit
Show the canonical listing, current trust and audit signals, and real Agent-Proven evidence where developers evaluate the repository.
[](https://www.openagentskill.com/skills/crafter-station-generate-brand-assets?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/crafter-station-generate-brand-assets?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/crafter-station-generate-brand-assets/audit)
[](https://www.openagentskill.com/skills/crafter-station-generate-brand-assets?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)crafter-station
@crafter-station
Share whether this skill looks useful for your agent workflow. Aggregated feedback improves rankings over time.
Sandbox only
Frontend Design
Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.
175.1K StarsTaste Skill: Anti-Slop Frontend
Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.
85.2K StarsVox Director
Turn one topic into a narrated Vox-style paper-collage explainer or ad video, from script through captions.
1.8K StarsCanvas Design
Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.
175.1K StarsSandbox only
Install targets
Codex install prompt
Install the "generate-brand-assets" agent skill from https://github.com/crafter-station/skills/tree/main/skills/generate-brand-assets. Read its SKILL.md or equivalent instructions first, install only the files needed for this workspace, and summarize any required setup before using it. Skill purpose: Generate OG images and favicon based on project branding. Use when: (1) user needs social media preview images for their project, (2) user wants to generate a favicon, (3) user is setting up branding assets for a website or app, (4) user has brand colors and wants professional-looking Open Graph images. Automatically generates correctly sized images optimized for social platforms (Twitter, LinkedIn, Facebook) and favicon formats. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {"event_id":"install_<unique-id>","skill_slug":"crafter-station-generate-brand-assets","task":"Install generate-brand-assets","agent":"codex","outcome":"success","install_used":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes.Supply asset profile
Code review, repo analysis, testing, CI, GitHub, DevOps, and developer workflow skills.
Scenario
Testing and QA
I need my agent to test a web app, reproduce bugs, and verify fixes.
Agent fit
Claude Code + Browser agents + CLI
Codex, Claude Code, Cursor, CLI, or custom agents.
Install
Ready
npx skills add crafter-station/skills --skill generate-brand-assets
Maintenance
fresh
5d since push
Risk
Needs review
Permission surface may require sandboxing
GitHub quality
111
67/100 Quality · 76/100 Trust
Coverage tags
Review notes
Permission surface may require sandboxing · Financial research output is not financial advice; require human review before any live investment decision
Agent adoption scorecard
These scores combine public repository metadata, OpenAgentSkill review signals, maintenance freshness, and install readiness. They are a shortlist signal, not a replacement for human review.
Quality
PromisingUseful candidate, but compare it with alternatives before adopting.
Trust
Sandbox onlyUseful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
Audit
Needs reviewA machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
OpenAgentSkill Trust Score v5
Run only in a sandbox and compare close alternatives before using it for real work.
Stars
111 GitHub stars
Repo activity
111 stars, 15 forks
Maintenance
5d since push
License
MIT
Install
npx skills add crafter-station/skills --skill generate-brand-assets
Install safety
Agent-readable metadata
Use this block or the embedded JSON to decide whether an agent should install this skill, choose an alternative, or ask for human review first.
Suited tasks
Suited agents
Install decision
Trust and risk
Outcome loop
Install command
npx skills add crafter-station/skills --skill generate-brand-assetsDo not use when
Alternative
175.1K Stars
npx skills add anthropics/skills --skill frontend-design
Alternative
85.2K Stars
npx skills add Leonxlnx/taste-skill --skill design-taste-frontend
Alternative
1.8K Stars
npx skills add Alisa0808/vox-director --skill vox-director
Alternative
175.1K Stars
npx skills add anthropics/skills --skill canvas-design
Agent safety v2
Sparse or mixed signals. Useful for discovery, but not for autonomous installation.
Test manually in an isolated workspace and compare against safer alternatives.
high
Skill metadata references terminal, CLI, shell, subprocess, or command execution workflows.
medium
Skill may drive a browser or interact with web pages.
medium
Skill likely fetches remote pages, APIs, repositories, or external services.
medium
Skill may read or write project files, documents, generated artifacts, or local workspace state.
Agent resolve plan
The Resolve API returns the selected skill, alternatives, safety policy, audit notes, install target, and copy-paste prompt an agent can follow without scraping this page.
Open JSON
/api/agent/resolve?task=Use%20generate-brand-assets%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Resolve text
/api/agent/resolve?task=Use%20generate-brand-assets%20for%20an%20agent%20workflow&agent=codex&max_risk=medium&format=text
Install handoff
/api/skills/crafter-station-generate-brand-assets/install
Agent should check
Copy prompt
Task: Use generate-brand-assets in this workspace.
Resolve first: https://www.openagentskill.com/api/agent/resolve?task=Use%20generate-brand-assets%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Review install handoff: https://www.openagentskill.com/api/skills/crafter-station-generate-brand-assets/install
Install command: npx skills add crafter-station/skills --skill generate-brand-assets
Before running it, summarize audit warnings, required permissions, and the fallback skill if install is risky.Agent handoff
Use the public install endpoint to fetch the command, safety checklist, target prompts, and canonical links for this skill.
Install handoff
/api/skills/crafter-station-generate-brand-assets/install
LLM text format
/api/skills/crafter-station-generate-brand-assets/install?format=text
Find alternatives
/api/skills/search?q=generate-brand-assets&limit=3
Agent prompt
Use generate-brand-assets for this task. Review https://www.openagentskill.com/api/skills/crafter-station-generate-brand-assets/install, then install with: npx skills add crafter-station/skills --skill generate-brand-assetsRegistry metadata
This page exposes the same decision, trust, audit, use-case, and install signals through the Registry API, so agents can rank this skill without scraping the UI.
Manifest
/api/registry/manifest/crafter-station-generate-brand-assets
LLM text
/api/registry/manifest/crafter-station-generate-brand-assets?format=text
Install alias
/api/registry/install/crafter-station-generate-brand-assets
Recommend
/api/registry/recommend?task=Use%20generate-brand-assets%20in%20an%20agent%20workflow&limit=3
Agent fit
Browser automation
Use-case tags
Platforms
Claude Code, Browser agents
Audit report
A machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
Agent decision cockpit
Prototype with this skill first; keep a fallback candidate ready.
Role in stack
Fallback candidate
Primary fit
Browser automation
Trust label
Prototype first
Install path
Command ready
Use when
Evidence
review first
Implementation path
Trust profile
Useful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
GitHub adoption
INFO111 GitHub stars
Stars/forks activity
CHECK111 stars, 15 forks; issue activity unavailable in current metadata
Recent maintenance
PASS5d since push
License clarity
PASSMIT
Good signals
Review before install
Recommended action
Run only in a sandbox and compare close alternatives before using it for real work.
Quality profile
Useful candidate, but compare it with alternatives before adopting.
Workflow fit
Operate web apps
I need my agent to control a browser, fill forms, and verify web app workflows.
Verify behavior
I need my agent to test a web app, reproduce bugs, and verify fixes.
Create assets
I need my agent to produce design assets, UI directions, presentations, or creative media workflows.
Workflow fit
Design, build, test, and ship interfaces
A practical workflow for agents that turn product briefs or Figma designs into polished frontend code, review the result, test it in a browser, and prepare a safe deployment.
Turn skills into distribution
A workflow for turning newly indexed skills into SEO briefs, social drafts, comparison pages, and reusable publishing workflows.
Operate and verify web apps
A workflow for agents that navigate products, fill forms, take screenshots, and verify real user flows across web applications.
Alternative shortlist
Similar skills that may fit this task.
Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.
Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.
Turn one topic into a narrated Vox-style paper-collage explainer or ad video, from script through captions.
Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.
--- name: generate-brand-assets version: 1.0.0 description: | Generate OG images and favicon based on project branding. Use when: (1) user needs social media preview images for their project, (2) user wants to generate a favicon, (3) user is setting up branding assets for a website or app, (4) user has brand colors and wants professional-looking Open Graph images. Automatically generates correctly sized images optimized for social platforms (Twitter, LinkedIn, Facebook) and favicon formats. ---
# generate-brand-assets
Generate branded OG (Open Graph) images and favicons for your project based on brand colors and identity.
## Prerequisites
Check if you have the necessary tools:
```bash node --version # Node.js 16+ ```
The skill uses built-in image generation capabilities. No additional dependencies required beyond Node.js.
## What It Generates
- **OG Images**: 1200×630px preview images for social media sharing (Twitter, LinkedIn, Facebook) - **Favicon**: Multiple formats (16×16, 32×32, 64×64, 192×192, 512×512) and iOS touch icons - **Manifest Icons**: Web app manifest-compatible icons - **Optimized**: WebP, PNG, and ICO formats for maximum compatibility
## Workflow
### 1. Identify Brand Colors
Ask the user for their brand colors. Typical palette includes: - Primary color (hex: `#RRGGBB`) - Accent color (optional) - Text color (typically `#000000` or `#FFFFFF` for contrast) - Background patterns (optional)
### 2. Gather Project Details
Collect information for the OG images: - Project name - Tagline or description (1-2 lines) - Logo path or text-based logo preference
### 3. Generate Assets
Command structure:
```bash npx generate-brand-assets \ --name "Your Project Name" \ --tagline "Brief project description" \ --primary-color "#3B82F6" \ --accent-color "#1E40AF" \ --output-dir ./public/brand-assets ```
### 4. Customization Options
| Option | Example | Purpose | |--------|---------|---------| | `--name` | "My Project" | Project name for OG images | | `--tagline` | "Build faster" | Subtitle/description on images | | `--primary-color` | "#3B82F6" | Main brand color | | `--accent-color` | "#1E40AF" | Secondary brand color | | `--text-color` | "#FFFFFF" | Text contrast color | | `--logo-path` | "./logo.png" | Custom logo file | | `--pattern` | "dots" \| "grid" | Background pattern style | | `--output-dir` | "./public" | Where to save generated assets | | `--format` | "png,webp,ico" | Image formats to generate |
### 5. Integration
**For Next.js/React projects:**
```jsx // next.config.js or next-seo.config.js { openGraph: { images: [ { url: '/brand-assets/og-image.png', width: 1200, height: 630, } ] }, icons: { icon: '/brand-assets/favicon.ico', apple: '/brand-assets/apple-touch-icon.png' } } ```
**For HTML projects:**
```html <!-- index.html --> <meta property="og:image" content="/brand-assets/og-image.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <link rel="icon" href="/brand-assets/favicon.ico" /> <link rel="apple-touch-icon" href="/brand-assets/apple-touch-icon.png" /> ```
### 6. Verification
Test generated images:
```bash # Check file sizes and formats ls -lh ./public/brand-assets/
# Preview in browser open ./public/brand-assets/og-image.png ```
Test social preview: - Use [Twitter Card Validator](https://cards-dev.twitter.com/validator) - Use [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/sharing) - Use [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/)
### 7. Report Results
Provide the user with: - List of generated files with dimensions - Output directory path - Integration instructions for their framework - Preview links if hosting is set up
## Common Patterns
### Gradient Backgrounds
```bash npx generate-brand-assets \ --name "My App" \ --gradient "from-#3B82F6 to-#1E40AF" \ --text-color "#FFFFFF" ```
### Dark Mode Support
Generate both light and dark variants:
```bash # Light version npx generate-brand-assets --theme light --primary-color "#3B82F6"
# Dark version npx generate-brand-assets --theme dark --primary-color "#60A5FA" ```
### Multiple Locale Variants
For multi-language projects:
```bash npx generate-brand-assets \ --name "My Project" \ --locale es \ --tagline "Construir más rápido" ```
## Troubleshooting
| Issue | Solution | |-------|----------| | Colors look wrong | Verify hex format is exactly `#RRGGBB` (6 chars) | | Text not readable | Ensure sufficient contrast; `text-color` should differ from background by >50% brightness | | Images too large | Use `--optimize` flag to reduce file size (trades some quality) | | Favicon not showing | Clear browser cache and hard-refresh (Cmd+Shift+R / Ctrl+Shift+F5) | | Output directory error | Ensure output directory exists or use `--create-dirs` flag |
## Next Steps
After generating assets: 1. Commit generated files to version control 2. Update social media preview URLs in deployment 3. Test social sharing on each platform (links may cache old images) 4. Monitor OG image performance in analytics
Source provenance
Decision snapshot
recent repository activity
Audit
Install and adoption review
Agent-proven evidence
Outcome reports after resolve, review, install, and one narrow run.
No agent outcome data yet. The first agent run can report success, setup needs, risk blocks, failure, or not-relevant through /api/agent/outcome.
Install
Free and open source. Review the report before installing into production agents.
Growth loop
Scenario-led draft for generate-brand-assets, ready for a manual X post.
generate-brand-assets: Generate OG images and favicon based on project branding. Use when: (1) user needs social med... 111 stars https://www.openagentskill.com/skills/crafter-station-generate-brand-assets?ref=x
Listing + install path for generate-brand-assets: https://www.openagentskill.com/skills/crafter-station-generate-brand-assets?ref=x Install: npx skills add crafter-station/skills --skill generate-brand-assets
Listing source
This listing was indexed from public sources and is not marked official until a maintainer claim is approved.
Attribution links to the public repository or creator profile. Creators can claim the listing to update ownership signals.
Claim this skillOwner claim
This Registry indexed listing is attributed to crafter-station but is not marked official yet. Claim it to add a verified owner signal and make future launch, install, and audit updates easier to trust.
Creator backlink kit
Show the canonical listing, current trust and audit signals, and real Agent-Proven evidence where developers evaluate the repository.
[](https://www.openagentskill.com/skills/crafter-station-generate-brand-assets?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/crafter-station-generate-brand-assets?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/crafter-station-generate-brand-assets/audit)
[](https://www.openagentskill.com/skills/crafter-station-generate-brand-assets?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)crafter-station
@crafter-station
Share whether this skill looks useful for your agent workflow. Aggregated feedback improves rankings over time.
Sandbox only
Frontend Design
Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.
175.1K StarsTaste Skill: Anti-Slop Frontend
Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.
85.2K StarsVox Director
Turn one topic into a narrated Vox-style paper-collage explainer or ad video, from script through captions.
1.8K StarsCanvas Design
Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.
175.1K StarsSandbox only
Install targets
Codex install prompt
Install the "generate-brand-assets" agent skill from https://github.com/crafter-station/skills/tree/main/skills/generate-brand-assets. Read its SKILL.md or equivalent instructions first, install only the files needed for this workspace, and summarize any required setup before using it. Skill purpose: Generate OG images and favicon based on project branding. Use when: (1) user needs social media preview images for their project, (2) user wants to generate a favicon, (3) user is setting up branding assets for a website or app, (4) user has brand colors and wants professional-looking Open Graph images. Automatically generates correctly sized images optimized for social platforms (Twitter, LinkedIn, Facebook) and favicon formats. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {"event_id":"install_<unique-id>","skill_slug":"crafter-station-generate-brand-assets","task":"Install generate-brand-assets","agent":"codex","outcome":"success","install_used":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes.Supply asset profile
Code review, repo analysis, testing, CI, GitHub, DevOps, and developer workflow skills.
Scenario
Testing and QA
I need my agent to test a web app, reproduce bugs, and verify fixes.
Agent fit
Claude Code + Browser agents + CLI
Codex, Claude Code, Cursor, CLI, or custom agents.
Install
Ready
npx skills add crafter-station/skills --skill generate-brand-assets
Maintenance
fresh
5d since push
Risk
Needs review
Permission surface may require sandboxing
GitHub quality
111
67/100 Quality · 76/100 Trust
Coverage tags
Review notes
Permission surface may require sandboxing · Financial research output is not financial advice; require human review before any live investment decision
Agent adoption scorecard
These scores combine public repository metadata, OpenAgentSkill review signals, maintenance freshness, and install readiness. They are a shortlist signal, not a replacement for human review.
Quality
PromisingUseful candidate, but compare it with alternatives before adopting.
Trust
Sandbox onlyUseful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
Audit
Needs reviewA machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
OpenAgentSkill Trust Score v5
Run only in a sandbox and compare close alternatives before using it for real work.
Stars
111 GitHub stars
Repo activity
111 stars, 15 forks
Maintenance
5d since push
License
MIT
Install
npx skills add crafter-station/skills --skill generate-brand-assets
Install safety
Agent-readable metadata
Use this block or the embedded JSON to decide whether an agent should install this skill, choose an alternative, or ask for human review first.
Suited tasks
Suited agents
Install decision
Trust and risk
Outcome loop
Install command
npx skills add crafter-station/skills --skill generate-brand-assetsDo not use when
Alternative
175.1K Stars
npx skills add anthropics/skills --skill frontend-design
Alternative
85.2K Stars
npx skills add Leonxlnx/taste-skill --skill design-taste-frontend
Alternative
1.8K Stars
npx skills add Alisa0808/vox-director --skill vox-director
Alternative
175.1K Stars
npx skills add anthropics/skills --skill canvas-design
Agent safety v2
Sparse or mixed signals. Useful for discovery, but not for autonomous installation.
Test manually in an isolated workspace and compare against safer alternatives.
high
Skill metadata references terminal, CLI, shell, subprocess, or command execution workflows.
medium
Skill may drive a browser or interact with web pages.
medium
Skill likely fetches remote pages, APIs, repositories, or external services.
medium
Skill may read or write project files, documents, generated artifacts, or local workspace state.
Agent resolve plan
The Resolve API returns the selected skill, alternatives, safety policy, audit notes, install target, and copy-paste prompt an agent can follow without scraping this page.
Open JSON
/api/agent/resolve?task=Use%20generate-brand-assets%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Resolve text
/api/agent/resolve?task=Use%20generate-brand-assets%20for%20an%20agent%20workflow&agent=codex&max_risk=medium&format=text
Install handoff
/api/skills/crafter-station-generate-brand-assets/install
Agent should check
Copy prompt
Task: Use generate-brand-assets in this workspace.
Resolve first: https://www.openagentskill.com/api/agent/resolve?task=Use%20generate-brand-assets%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Review install handoff: https://www.openagentskill.com/api/skills/crafter-station-generate-brand-assets/install
Install command: npx skills add crafter-station/skills --skill generate-brand-assets
Before running it, summarize audit warnings, required permissions, and the fallback skill if install is risky.Agent handoff
Use the public install endpoint to fetch the command, safety checklist, target prompts, and canonical links for this skill.
Install handoff
/api/skills/crafter-station-generate-brand-assets/install
LLM text format
/api/skills/crafter-station-generate-brand-assets/install?format=text
Find alternatives
/api/skills/search?q=generate-brand-assets&limit=3
Agent prompt
Use generate-brand-assets for this task. Review https://www.openagentskill.com/api/skills/crafter-station-generate-brand-assets/install, then install with: npx skills add crafter-station/skills --skill generate-brand-assetsRegistry metadata
This page exposes the same decision, trust, audit, use-case, and install signals through the Registry API, so agents can rank this skill without scraping the UI.
Manifest
/api/registry/manifest/crafter-station-generate-brand-assets
LLM text
/api/registry/manifest/crafter-station-generate-brand-assets?format=text
Install alias
/api/registry/install/crafter-station-generate-brand-assets
Recommend
/api/registry/recommend?task=Use%20generate-brand-assets%20in%20an%20agent%20workflow&limit=3
Agent fit
Browser automation
Use-case tags
Platforms
Claude Code, Browser agents
Audit report
A machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
Agent decision cockpit
Prototype with this skill first; keep a fallback candidate ready.
Role in stack
Fallback candidate
Primary fit
Browser automation
Trust label
Prototype first
Install path
Command ready
Use when
Evidence
review first
Implementation path
Trust profile
Useful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
GitHub adoption
INFO111 GitHub stars
Stars/forks activity
CHECK111 stars, 15 forks; issue activity unavailable in current metadata
Recent maintenance
PASS5d since push
License clarity
PASSMIT
Good signals
Review before install
Recommended action
Run only in a sandbox and compare close alternatives before using it for real work.
Quality profile
Useful candidate, but compare it with alternatives before adopting.
Workflow fit
Operate web apps
I need my agent to control a browser, fill forms, and verify web app workflows.
Verify behavior
I need my agent to test a web app, reproduce bugs, and verify fixes.
Create assets
I need my agent to produce design assets, UI directions, presentations, or creative media workflows.
Workflow fit
Design, build, test, and ship interfaces
A practical workflow for agents that turn product briefs or Figma designs into polished frontend code, review the result, test it in a browser, and prepare a safe deployment.
Turn skills into distribution
A workflow for turning newly indexed skills into SEO briefs, social drafts, comparison pages, and reusable publishing workflows.
Operate and verify web apps
A workflow for agents that navigate products, fill forms, take screenshots, and verify real user flows across web applications.
Alternative shortlist
Similar skills that may fit this task.
Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.
Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.
Turn one topic into a narrated Vox-style paper-collage explainer or ad video, from script through captions.
Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.
--- name: generate-brand-assets version: 1.0.0 description: | Generate OG images and favicon based on project branding. Use when: (1) user needs social media preview images for their project, (2) user wants to generate a favicon, (3) user is setting up branding assets for a website or app, (4) user has brand colors and wants professional-looking Open Graph images. Automatically generates correctly sized images optimized for social platforms (Twitter, LinkedIn, Facebook) and favicon formats. ---
# generate-brand-assets
Generate branded OG (Open Graph) images and favicons for your project based on brand colors and identity.
## Prerequisites
Check if you have the necessary tools:
```bash node --version # Node.js 16+ ```
The skill uses built-in image generation capabilities. No additional dependencies required beyond Node.js.
## What It Generates
- **OG Images**: 1200×630px preview images for social media sharing (Twitter, LinkedIn, Facebook) - **Favicon**: Multiple formats (16×16, 32×32, 64×64, 192×192, 512×512) and iOS touch icons - **Manifest Icons**: Web app manifest-compatible icons - **Optimized**: WebP, PNG, and ICO formats for maximum compatibility
## Workflow
### 1. Identify Brand Colors
Ask the user for their brand colors. Typical palette includes: - Primary color (hex: `#RRGGBB`) - Accent color (optional) - Text color (typically `#000000` or `#FFFFFF` for contrast) - Background patterns (optional)
### 2. Gather Project Details
Collect information for the OG images: - Project name - Tagline or description (1-2 lines) - Logo path or text-based logo preference
### 3. Generate Assets
Command structure:
```bash npx generate-brand-assets \ --name "Your Project Name" \ --tagline "Brief project description" \ --primary-color "#3B82F6" \ --accent-color "#1E40AF" \ --output-dir ./public/brand-assets ```
### 4. Customization Options
| Option | Example | Purpose | |--------|---------|---------| | `--name` | "My Project" | Project name for OG images | | `--tagline` | "Build faster" | Subtitle/description on images | | `--primary-color` | "#3B82F6" | Main brand color | | `--accent-color` | "#1E40AF" | Secondary brand color | | `--text-color` | "#FFFFFF" | Text contrast color | | `--logo-path` | "./logo.png" | Custom logo file | | `--pattern` | "dots" \| "grid" | Background pattern style | | `--output-dir` | "./public" | Where to save generated assets | | `--format` | "png,webp,ico" | Image formats to generate |
### 5. Integration
**For Next.js/React projects:**
```jsx // next.config.js or next-seo.config.js { openGraph: { images: [ { url: '/brand-assets/og-image.png', width: 1200, height: 630, } ] }, icons: { icon: '/brand-assets/favicon.ico', apple: '/brand-assets/apple-touch-icon.png' } } ```
**For HTML projects:**
```html <!-- index.html --> <meta property="og:image" content="/brand-assets/og-image.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <link rel="icon" href="/brand-assets/favicon.ico" /> <link rel="apple-touch-icon" href="/brand-assets/apple-touch-icon.png" /> ```
### 6. Verification
Test generated images:
```bash # Check file sizes and formats ls -lh ./public/brand-assets/
# Preview in browser open ./public/brand-assets/og-image.png ```
Test social preview: - Use [Twitter Card Validator](https://cards-dev.twitter.com/validator) - Use [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/sharing) - Use [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/)
### 7. Report Results
Provide the user with: - List of generated files with dimensions - Output directory path - Integration instructions for their framework - Preview links if hosting is set up
## Common Patterns
### Gradient Backgrounds
```bash npx generate-brand-assets \ --name "My App" \ --gradient "from-#3B82F6 to-#1E40AF" \ --text-color "#FFFFFF" ```
### Dark Mode Support
Generate both light and dark variants:
```bash # Light version npx generate-brand-assets --theme light --primary-color "#3B82F6"
# Dark version npx generate-brand-assets --theme dark --primary-color "#60A5FA" ```
### Multiple Locale Variants
For multi-language projects:
```bash npx generate-brand-assets \ --name "My Project" \ --locale es \ --tagline "Construir más rápido" ```
## Troubleshooting
| Issue | Solution | |-------|----------| | Colors look wrong | Verify hex format is exactly `#RRGGBB` (6 chars) | | Text not readable | Ensure sufficient contrast; `text-color` should differ from background by >50% brightness | | Images too large | Use `--optimize` flag to reduce file size (trades some quality) | | Favicon not showing | Clear browser cache and hard-refresh (Cmd+Shift+R / Ctrl+Shift+F5) | | Output directory error | Ensure output directory exists or use `--create-dirs` flag |
## Next Steps
After generating assets: 1. Commit generated files to version control 2. Update social media preview URLs in deployment 3. Test social sharing on each platform (links may cache old images) 4. Monitor OG image performance in analytics
Source provenance
Decision snapshot
recent repository activity
Audit
Install and adoption review
Agent-proven evidence
Outcome reports after resolve, review, install, and one narrow run.
No agent outcome data yet. The first agent run can report success, setup needs, risk blocks, failure, or not-relevant through /api/agent/outcome.
Install
Free and open source. Review the report before installing into production agents.
Growth loop
Scenario-led draft for generate-brand-assets, ready for a manual X post.
generate-brand-assets: Generate OG images and favicon based on project branding. Use when: (1) user needs social med... 111 stars https://www.openagentskill.com/skills/crafter-station-generate-brand-assets?ref=x
Listing + install path for generate-brand-assets: https://www.openagentskill.com/skills/crafter-station-generate-brand-assets?ref=x Install: npx skills add crafter-station/skills --skill generate-brand-assets
Listing source
This listing was indexed from public sources and is not marked official until a maintainer claim is approved.
Attribution links to the public repository or creator profile. Creators can claim the listing to update ownership signals.
Claim this skillOwner claim
This Registry indexed listing is attributed to crafter-station but is not marked official yet. Claim it to add a verified owner signal and make future launch, install, and audit updates easier to trust.
Creator backlink kit
Show the canonical listing, current trust and audit signals, and real Agent-Proven evidence where developers evaluate the repository.
[](https://www.openagentskill.com/skills/crafter-station-generate-brand-assets?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/crafter-station-generate-brand-assets?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/crafter-station-generate-brand-assets/audit)
[](https://www.openagentskill.com/skills/crafter-station-generate-brand-assets?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)crafter-station
@crafter-station
Share whether this skill looks useful for your agent workflow. Aggregated feedback improves rankings over time.
Sandbox only
Frontend Design
Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.
175.1K StarsTaste Skill: Anti-Slop Frontend
Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.
85.2K StarsVox Director
Turn one topic into a narrated Vox-style paper-collage explainer or ad video, from script through captions.
1.8K StarsCanvas Design
Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.
175.1K StarsPermission surface
shell or command execution, filesystem or document access
Agent outcomes
No agent outcome data yet
Docs
Strong README/SKILL.md context
Risk summary
Install readiness
Permission surface
shell or command execution, filesystem or document access
Agent outcomes
No agent outcome data yet
Docs
Strong README/SKILL.md context
Risk summary
Install readiness
Permission surface
shell or command execution, filesystem or document access
Agent outcomes
No agent outcome data yet
Docs
Strong README/SKILL.md context
Risk summary
Install readiness
Permission surface
shell or command execution, filesystem or document access
Agent outcomes
No agent outcome data yet
Docs
Strong README/SKILL.md context
Risk summary
Install readiness