frontend-blueprint
frontend-blueprint is a skill in tech-leads-club/agent-skills, last changed 24 Feb 2026. It can name web addresses.
AI frontend specialist and design consultant that guides users through a structured discovery process before generating any code. Collects visual references, design tokens, typography, icons, layout preferences, and brand guidelines to ensure the final output matches the user's vision with high fidelity. Use when the user asks to build, design, create, or improve any frontend interface — websites, landing pages, dashboards, components, apps, emails, forms, modals, or any UI element. Also triggers on "build me a UI", "design a page", "create a component", "improve this layout", "make this look better", "frontend", "interface", "redesign", or when the user provides mockups, screenshots, or design references. Do NOT use for backend logic, API design, database schemas, or non-visual code tasks.
At a glance
Pattern check
Nothing flagged
That isn't proof the skill is harmless.
Commit 1da2195 · 3 Nov 2026
How the check worksPattern check: nothing flagged
That isn't proof the skill is harmless.
Install
OpenCode also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
Goose also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
Windsurf (Devin Desktop) also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
Zed also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
Roo Code also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
Factory Droid also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
Junie also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
Amp also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
No install command here reaches Kiro. Copy the skill's folder into .kiro/skills/ in your project, or ~/.kiro/skills/ for all your projects. tech-leads-club/agent-skills/packages/skills-catalog/skills/(architecture)/frontend-blueprint (opens in a new tab)
Antigravity also looks in .agents/skills/, so the Any agent steps reach it with This project. For All projects, see where Antigravity looks.
Cline also looks in .claude/skills/, so the Claude Code steps reach it with This project. For All projects, see where Cline looks.
Claude Code
This name can't be installed by command. Install it from GitHub by hand.
Claude apps
This name can't be installed by command. Install it from GitHub by hand.
Codex
This name can't be installed by command. Install it from GitHub by hand.
Cursor
This name can't be installed by command. Install it from GitHub by hand.
Copilot & VS Code
This name can't be installed by command. Install it from GitHub by hand.
Gemini CLI
This name can't be installed by command. Install it from GitHub by hand.
Any agent
This name can't be installed by command. Install it from GitHub by hand.
What it can touch
From the files and frontmatter at commit 1da2195. This is how much a skill can do, not whether it is risky.
Pattern check
Pattern check: nothing flagged · commit 1da2195 · 3 Nov 2026
We checked every text file in this skill, at commit 1da2195 on 3 Nov 2026, against 45 published patterns such as download-and-run commands, hidden text and credential access. We don't run the skill, we don't read the web pages it points to, and we can't judge everything its instructions might lead an agent to do. In published tests, pattern checks like this one missed most malicious skills. Read the skill before you install it — especially anything it asks you to download or run.
How the check worksReport an incorrect finding
Outside links we did not follow
- https://stitch.googleapis.com/mcp
Format check
Each agent reads SKILL.md a little differently. We check the file against each one's published rules; we don't run the skill in any agent.
Agent Skills specPasses with warnings
The open format from agentskills.io, held to the strictest version of each rule among the agents we check.
- Warning
The body is about 5,061 tokens (approx.); the spec suggests under 5,000. B2
Fix: Move detail into reference files that the agent reads only when needed.
- Warning
Claude CodePasses
Claude Code reads its own extra fields, ignores unknown ones, and still loads a skill whose frontmatter is broken, without its fields.
- Note
The body is about 5,061 tokens (approx.); the spec suggests under 5,000. After compaction Claude Code keeps only the first 5,000 tokens of a skill. B2
Fix: Move detail into reference files that the agent reads only when needed.
- Note
Claude apps & API uploadPasses
Uploading to claude.ai or the Claude API, or packaging with Anthropic's script, accepts only the six spec fields and stops on anything else.
- Note
The description is 801 characters. The claude.ai Help Center says 200 at most, though Anthropic's API docs and validator allow 1,024. D4
Fix: If the claude.ai upload refuses it, trim the description to 200 characters.
- Note
The body is about 5,061 tokens (approx.); the spec suggests under 5,000. Anthropic's guidance says the same. B2
Fix: Move detail into reference files that the agent reads only when needed.
- Note
- OpenAI (Codex & API)Passes
- VS Code & CopilotPasses
SKILL.md
Files
More from tech-leads-club/agent-skills
Other Frontend & design skills
Same category, most repo stars first.