skills.rest
jwynia
jwyniaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Analyze CSS/HTML foundations and generate design tokens, palettes, typography, and component templates.

Updated Jan 6, 2026
Search Tags:#typography#accessibility#component#design-system#token#palette#frontend-design
One-click install
npx skills add https://github.com/jwynia/teach --skill frontend-design-jwynia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/jwynia/teach/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/jwynia/teach --skill frontend-design-jwynia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Frontend teams struggle to unify design language, scale tokens, and generate consistent components across frameworks; this skill provides a principled design philosophy plus automated tooling to audit, tokenize, and generate frontend artifacts.

Core Features & Use Cases

  • Auditing CSS/HTML for design consistency and accessibility
  • Generating color palettes, typography systems, and design tokens
  • Creating framework-ready component templates across React, Vue, Svelte, and vanilla HTML/CSS

Quick Start

Load your CSS/HTML base into the frontend-design tool to analyze styles and generate a starter design system.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a design system from existing CSS and HTML?▼

You can generate design tokens by loading your CSS and HTML base into the tool, which analyzes the styles and produces a complete starter design system with tokens, palettes, and typography.

Can I use generated component templates across React, Vue, and Svelte?▼

Yes, component templates are framework-ready and can be applied directly across React, Vue, Svelte, and vanilla HTML/CSS projects to maintain consistent design language.

What is the best way to audit frontend design consistency and accessibility?▼

Auditing frontend design consistency and accessibility involves analyzing your CSS and HTML foundations, applying deterministic scripting and accessibility checks to generate framework-ready artifacts.

Does this approach support generating color palettes and typography systems?▼

Yes, this approach supports generating color palettes and typography systems by analyzing your base CSS and HTML to produce scalable design tokens for your frontend projects.

Do I need external dependencies to generate frontend design tokens?▼

No external dependencies are required to generate frontend design tokens; the skill operates independently using its internal scripts, references, and assets to analyze and output artifacts.

Related Skills

Explore More Design & Creative Skills→
HuskyDannyHuskyDanny

popular-web-designs

Generate HTML/CSS from real-world design system templates and tokens.

Community
Intermediate
davidbeglenboyledavidbeglenboyle
2

frontend-design

Generate production-grade HTML/CSS/JS frontend interfaces from design briefs.

Community
Advanced
htayjhtayj

ux-review

Review web and app interfaces for accessibility, consistency, and usability issues.

Community
Intermediate
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced