frontend-design_skill

This skill helps you design production-grade frontend interfaces by analyzing designs, generating tokens, palettes, typography, and framework-ready components.

TypeScript

22

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill jwynia/agent-skills --skill frontend-design

SKILL.md12.3 KB

Overview

This skill creates distinctive, production-grade frontend interfaces and tooling to audit and generate design system artifacts. It combines design guidance with TypeScript-powered analysis and generation for palettes, typography, tokens, and component templates. It supports React, Vue, Svelte and vanilla HTML/CSS and includes accessibility checks to ship robust UI code.

How this skill works

The skill inspects existing CSS and component code to inventory colors, type, spacing and inconsistencies, then extracts or produces standardized design tokens. It can generate palettes from seed colors, build responsive typography systems, and emit multi-format token files (CSS, SCSS, Tailwind, JSON/TS). It also scaffolds components per framework and styling preference, and runs accessibility audits (contrast, focus, touch targets).

When to use it

Building or redesigning web components, pages, or full applications
Auditing legacy CSS to extract tokens and find inconsistencies
Generating cohesive color palettes and typography systems from seeds or specs
Scaffolding components across React, Vue, Svelte or plain HTML/CSS
Validating design-related accessibility before launch

Best practices

Start with an analysis pass to surface patterns and token candidates before generating new assets
Pick a clear aesthetic direction and apply it consistently across palette, typography, and components
Export tokens in multiple formats to keep design and dev aligned (CSS variables, tokens JSON/TS, Tailwind)
Include dark mode and accessibility targets (AA/AAA) in generation specs from the outset
Use generated components as opinionated starting points and refine styles to match brand intent

Example use cases

Audit a legacy codebase to extract color and spacing tokens and produce a modern token set
Generate a complete color palette and semantic variants (success/warn/error) from a brand seed color
Create a responsive typography scale with chosen display and body fonts and export as CSS tokens
Produce framework-specific button and card templates (React + Tailwind, Vue + CSS Modules, Svelte + CSS) to jumpstart a component library
Run an accessibility audit over components and fix contrast and focus-state issues before release

FAQ

React, Vue, Svelte and vanilla HTML/CSS are supported. Token and styling outputs include css, scss, tailwind, style-dictionary, JSON and TypeScript.

Can it check accessibility automatically?

Yes. It analyzes color contrast, focus indicators, touch target sizes and motion preferences and can target WCAG AA or AAA levels.

Do I need an existing tokens file?

No. Tokens are optional. The tool can extract tokens from existing CSS or generate new token sets from specifications.