frontend-design

Overview

What is frontend-design?

The frontend-design skill is a specialized toolkit for creating visually distinctive, production-grade frontend interfaces. Unlike generic code generators, this skill emphasizes creative direction, aesthetics, typography, motion, layout, and interface polish. It is designed to help you deliver web components, pages, and applications that stand out and feel intentional, not like typical AI output.

Who should use frontend-design?

This skill is ideal for frontend developers, UI/UX designers, and product teams who want to elevate the visual and interactive quality of their web projects. Use frontend-design when you need:

• High-quality, creative UI design for web apps, landing pages, or digital artifacts
• Guidance on color, typography, motion, and responsive layouts
• To avoid generic, uninspired AI-generated interfaces
• To ensure accessibility and design best practices are followed

What problems does it solve?

• Prevents "AI slop" by requiring real project and brand context before design begins
• Provides actionable design systems for color, spacing, typography, and interaction
• Ensures accessibility and responsive design are built in from the start
• Offers practical, production-ready code and design patterns

How to Use

Installation Steps

1. Add the skill to your project:
   Run:

   npx skills add https://github.com/pbakaus/impeccable --skill frontend-design
   

2. Review core documentation:
   • Start with SKILL.md for a high-level overview and context-gathering protocol.
   • Check README.md, AGENTS.md, and metadata.json for additional setup and usage notes.
3. Explore design references:
   The reference/ folder contains practical guides on:
   • Color and contrast (reference/color-and-contrast.md)
   • Interaction design (reference/interaction-design.md)
   • Motion design (reference/motion-design.md)
   • Responsive design (reference/responsive-design.md)
   • Spatial design (reference/spatial-design.md)
   • Typography (reference/typography.md)
   • UX writing (reference/ux-writing.md)
4. Adapt to your workflow:
   Integrate the design principles and code examples into your own repository and toolchain. The skill is meant to be adapted, not copied verbatim.

Key Workflow Tips

• Always gather project context (audience, use cases, brand tone) before starting design work.
• Use the provided color, spacing, and typography systems for consistent, accessible UI.
• Reference the motion and interaction guides to ensure your interfaces feel polished and intuitive.
• Check the reference/ files for ready-to-use CSS and design patterns.

FAQ

When should I use the frontend-design skill?

Use frontend-design when you need to create or improve the visual and interactive quality of web components, pages, or applications—especially when design context and brand personality matter.

What files should I look at first?

• SKILL.md for the overview and context requirements
• reference/color-and-contrast.md for color system guidance
• reference/interaction-design.md for state and accessibility best practices
• reference/motion-design.md for animation and timing
• reference/responsive-design.md for adaptive layouts
• reference/spatial-design.md for spacing and grids

Does frontend-design generate code or just guidelines?

It provides both: practical, production-ready code snippets (mainly CSS) and detailed design guidelines to help you implement them effectively.

Is frontend-design suitable for every project?

This skill is best for projects where design quality, brand differentiation, and accessibility are priorities. For purely functional or internal tools where aesthetics are less important, a simpler approach may suffice.

Where can I find more details?

Browse the full file tree in the Files tab, including all nested references and helper scripts, for in-depth guidance and examples.