# Build Distinctive Production-Ready Frontends

Generic interface patterns weaken product identity and user impact. This skill guides AI agents to create distinctive, accessible frontends with coherent design systems and working code.

## Install

```bash
npx skillstore add sickn33/frontend-design
```

## Metadata

- Status: approved
- Slug: sickn33-frontend-design
- Skillstore revision: r2
- Version status: missing
- Tree hash: 8cfa4c3163aefd0ed5f7b2bc5103999ecb76bcb77d158213a22a979df56f30ee
- Author: sickn33
- GitHub username: sickn33
- License: MIT
- Repository: https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-design
- Ref: 88a8e9a07f4c54ab105c1c41b6267c287146b07b
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/sickn33-frontend-design
- Manifest: https://skillstore.pages.dev/api/skills/sickn33-frontend-design/manifest

## Capabilities

- Defines purpose, audience, tone, and a differentiation anchor before implementation.
- Scores design directions using aesthetic impact, context fit, feasibility, performance, and consistency risk.
- Produces working HTML, CSS, JavaScript, or React interfaces with modular implementation guidance.
- Creates typography, color, spacing, and motion rules for a cohesive design system.
- Applies semantic HTML, contrast, focus, keyboard, and performance requirements.

## Use Cases

- Shape a product concept: Turn a product brief into a named visual direction, differentiation anchor, and practical design system.
- Implement a polished interface: Build a responsive interface with coherent typography, color, spacing, motion, and accessible interaction states.
- Differentiate a launch page: Create a memorable launch experience that reflects the product audience without relying on generic templates.

## Prompt Templates

### Define a visual direction

```
Review this product brief: [brief]. Define the purpose, audience, dominant tone, differentiation anchor, and DFII score before proposing implementation.
```

### Design a focused page

```
Design a [page type] for [audience]. Use [brand constraints], prioritize [primary action], and provide the direction, design system, and responsive behavior.
```

### Implement a complete interface

```
Implement the approved direction in [technology]. Include responsive layouts, semantic structure, keyboard access, focus states, performance considerations, and purposeful motion.
```

### Audit and refine a design system

```
Audit this existing interface against its audience, aesthetic direction, accessibility needs, and performance goals. Identify generic patterns, then implement prioritized improvements.
```

## Limitations

- Does not replace browser testing, usability research, accessibility audits, or performance profiling.
- Requires product context and technical constraints to choose an appropriate aesthetic direction.
- Does not provide bundled fonts, images, brand assets, or framework dependencies.
- Strong stylistic rules may need adaptation for established design systems and regulated products.

## Best Practices

- Provide the audience, primary action, content, brand constraints, technology, and performance requirements.
- Choose one dominant aesthetic direction and one memorable differentiation anchor before implementation.
- Test the generated interface across devices, keyboard workflows, reduced motion settings, and production data.

## Anti Patterns

- Combining unrelated visual styles without a clear product rationale.
- Using default fonts, balanced palettes, repeated cards, and predictable sections as the final design.
- Adding animation, texture, or decorative effects that reduce clarity, accessibility, or performance.

## Security Audit

- Audited at: 2026-07-23T22:52:21.991\+00:00
- Summary: All seven static findings are false positives. Lines 63 and 65 are Markdown fences around an arithmetic formula, while the remaining matches are ordinary design guidance. No prompt injection, command execution, reconnaissance, or malicious intent was found.

## Stats

- Views: 114
- Downloads: 25
- Favorites: 1
- Popularity score: 0