frontend-theme

Name: frontend-theme
Availability: InStock
Author: chriswestt

Apply design tokens, typography, and layout rules to frontend outputs.

Updated Apr 21, 2026

Search Tags:#typography #layout #frontend #components #tokens #design-system

Ready to run

npx skills add https://github.com/chriswestt/claude-skills --skill frontend-theme-chriswestt

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-theme
Source: https://github.com/chriswestt/claude-skills/tree/main/frontend-theme
Command: npx skills add https://github.com/chriswestt/claude-skills --skill frontend-theme-chriswestt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Frontend Theme ensures a cohesive Rawgrowth design system is applied to every frontend project, guaranteeing token usage, typography, layout conventions, and component patterns before UI code is authored.

Core Features & Use Cases

Injects token sets and typography rules at the start of frontend work to ensure design consistency.
Defines layout conventions and component patterns to accelerate UI development and reduce rework.
Use Case: When starting a new admin dashboard, apply the Rawgrowth system to guarantee visual cohesion from wireframe to production.

Quick Start

Integrate the design system by loading tokens and typography, then apply components to your UI code.

Frequently Asked Questions about frontend-theme

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

FAQPage Schema

How do I enforce a design system in React and Next.js projects?▼

Enforce a design system in React and Next.js by injecting token sets, typography rules, and layout conventions before UI code is authored, ensuring visual consistency from wireframes to production. This standardizes components and spacing across dashboards and pages.

What tokens and typography rules do I need for a dark theme with green accents?▼

Tokens and typography rules for a dark theme with green accents define border colors, atmosphere, spacing, and component patterns. Standardizing these design tokens guarantees visual cohesion across frontend outputs by applying consistent layout and styling guidelines.

Can I use Tailwind to apply custom design tokens and layout patterns?▼

Yes, you can use Tailwind to apply custom design tokens and layout patterns by injecting token sets and typography rules into your configuration. This standardizes component patterns and spacing to accelerate UI development and reduce rework.

How do I standardize component patterns and spacing across admin dashboards?▼

Standardize component patterns and spacing across admin dashboards by defining layout conventions and applying cohesive token sets before authoring UI code. This guarantees visual cohesion from wireframe to production by enforcing strict typography and component rules.

Does this frontend design system work with HTML and CSS outputs?▼

Yes, the frontend design system works with HTML, CSS, React, and Next.js outputs by applying tokens, typography, and layout rules. It scopes frontend work from wireframes to production, ensuring visual consistency across dashboards and pages.

Why does my frontend UI lack visual consistency across different pages?▼

Frontend UI lacks visual consistency across pages when token sets, typography rules, and layout conventions are not standardized before authoring code. Defining strict component patterns and spacing guidelines ensures cohesive dashboards from wireframe to production.