frontend-design
by affaan-mUse frontend-design to build distinctive, production-grade frontend interfaces with a clear visual point of view. This frontend-design skill is built for landing pages, dashboards, app shells, and components where hierarchy, typography, motion, and polish matter as much as implementation. It includes install and usage guidance for design-first UI work.
This skill scores 78/100, which means it is a solid listing candidate for directory users who want a frontend-focused workflow with stronger design intent than a generic prompt. It is clearly triggerable for UI, page, and component work, and it provides enough process guidance to reduce guesswork, though it would benefit from more concrete operational examples and supporting assets.
- Clear use cases for landing pages, dashboards, app surfaces, and visual systems when design quality matters
- Actionable design workflow that tells agents to frame the interface, choose a direction, and build a coherent visual system
- Useful constraints around typography, composition, motion, and avoiding mixed aesthetics
- No scripts, references, resources, or supporting files, so the workflow depends entirely on the markdown instructions
- Truncated evidence suggests limited visibility into the full implementation details, which may leave some edge cases underspecified
Overview of frontend-design skill
The frontend-design skill helps you build frontend UI that feels intentionally designed, not just technically correct. It is best for landing pages, dashboards, app shells, and components where visual direction, hierarchy, and polish matter as much as implementation.
Use frontend-design when you already know the product goal but need help turning it into a cohesive interface. It is especially useful for UI Design work that needs a clear aesthetic point of view, faster decisions on layout and typography, and less generic “AI-looking” output.
What this skill is best at
frontend-design is strongest when the task needs a visible design stance: editorial layouts, sharp component systems, polished product surfaces, and upgrades from bland to intentional. The skill pushes you to choose one direction and execute it consistently.
What makes it different
Instead of giving vague “make it modern” advice, the frontend-design skill centers the workflow on framing, visual system choices, and implementation discipline. That means fewer random style changes, better consistency across sections, and more useful output for real product work.
When it is a good fit
Choose frontend-design if you want a frontend-design guide that improves composition, spacing, type hierarchy, and motion without overcomplicating the build. It is a good install when the main risk is generic UI rather than missing functionality.
How to Use frontend-design skill
Install and inspect the skill
Install the frontend-design skill with:
npx skills add affaan-m/everything-claude-code --skill frontend-design
Start with skills/frontend-design/SKILL.md. In this repository, that is the only source file, so the install workflow is simple: read the skill, then adapt it to your stack, design system, and codebase constraints.
Turn a rough request into a usable prompt
For best frontend-design usage, give the model the product type, audience, tone, and constraints before asking for code. A weak prompt is: “design my homepage.” A stronger prompt is: “Use frontend-design to create a landing page for a B2B analytics tool. The tone should be calm and premium, the layout should feel editorial, and the page must work with Tailwind and React.”
Follow the design-first workflow
The skill is built around framing the interface first, then building the visual system. In practice, that means deciding the one memorable idea, the emotional tone, and the aesthetic direction before asking for implementation. This avoids mixed styles and makes the output easier to review.
Read the repository in the right order
Because this skill has no supporting scripts or helper files, there is no hidden setup layer. Read SKILL.md first, then use its guidance as the working spec. If you are applying it inside a real repo, map its advice onto your existing tokens, components, and CSS conventions rather than copying it verbatim.
frontend-design skill FAQ
Is frontend-design only for new builds?
No. The frontend-design skill is also useful for redesigns, component refreshes, and visual upgrades where the current UI works but looks flat, dated, or inconsistent.
How is this different from a normal prompt?
A normal prompt often produces one-off UI ideas. frontend-design gives you a repeatable frontend-design guide: pick a direction, define a system, and keep the interface coherent as it is implemented.
Is frontend-design for UI Design beginners?
Yes, if you can describe your product clearly. The skill reduces guesswork by making you state the audience, tone, and visual direction up front. Beginners get better results when they provide concrete examples instead of abstract adjectives.
When should I not use this skill?
Skip frontend-design if you only need logic, data wiring, or a quick functional mock with no visual ambition. It is also a poor fit if the project requires strict brand compliance but you cannot provide brand rules or design constraints.
How to Improve frontend-design skill
Give stronger inputs before the first run
The best frontend-design install starts with specifics: product type, target user, content length, platform, and what should feel different from a generic app. If you want a dashboard, say what metrics matter; if you want a landing page, say what action should convert.
Provide boundaries that shape the system
frontend-design performs better when you define what must stay fixed: component library, framework, color constraints, accessibility needs, responsive breakpoints, or motion limits. These boundaries help the skill choose a sharper visual system instead of drifting into decoration.
Review the first output for coherence, not novelty
The most common failure mode is style drift: too many fonts, inconsistent spacing, or decorative elements that compete with the message. When reviewing output, check whether the typography, spacing rhythm, and surface treatment all support the same idea.
Iterate with precise feedback
If the first result is close, improve the frontend-design skill by naming the specific weakness: “the hero is strong, but the cards feel generic,” or “keep the layout but make it more editorial and reduce chrome.” Precise feedback produces better second-pass UI than asking for “more design.”