skills.rest
scanbott
scanbottCOMMUNITY
Explore all skills by this author →
GitHub

frontend-theme

Apply Rawgrowth design system tokens, typography, and layout before writing UI code.

Updated Apr 21, 2026
Search Tags:#typography#frontend#react#tailwind#tokens#design-system#ui-patterns
One-click install
npx skills add https://github.com/scanbott/claude-skills --skill frontend-theme
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-theme
Source: https://github.com/scanbott/claude-skills/tree/main/frontend-theme
Command: npx skills add https://github.com/scanbott/claude-skills --skill frontend-theme

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures a consistent, cohesive frontend UI by applying the Rawgrowth.ai design system across projects, eliminating divergence in tokens, typography, and layout.

Core Features & Use Cases

  • Inject tokens, typography rules, and layout conventions before writing UI code.
  • Enforce component patterns and atmosphere guidelines to maintain a unified aesthetic across pages, dashboards, and components.
  • Use Case: A team shipping a new admin panel can rely on this system to deliver consistent UI with minimal rework.

Quick Start

Create a frontend module and ensure tokens and typography are applied before coding.

Frequently Asked Questions about frontend-theme

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

FAQPage Schema
How do I enforce design system tokens and typography rules in React before writing UI code?▼

To enforce design system tokens and typography in React, you inject tokens and apply layout conventions before authoring UI code, ensuring consistent component patterns and unified aesthetics across pages and dashboards.

What is design token injection and when do I need it for frontend projects?▼

Design token injection applies standardized typography rules and layout conventions to frontend projects before coding. You need it to eliminate divergence in tokens and layout, ensuring a consistent, cohesive UI across pages and dashboards.

Does this design system enforcement work with Tailwind CSS and React dashboards?▼

Design system enforcement works with Tailwind CSS and React dashboards by applying token injection, typography rules, and component patterns to maintain a unified aesthetic across admin panels and components before UI code is written.

How do I apply component patterns and layout conventions to a new frontend module?▼

To apply component patterns and layout conventions to a frontend module, create the module and ensure tokens and typography are applied before coding, enforcing atmosphere guidelines to maintain a unified aesthetic with minimal rework.

Why does my frontend UI diverge from established typography and token rules?▼

Frontend UI diverges from typography and token rules when conventions are not applied before code authoring. Enforcing token injection and component patterns before writing UI code eliminates this divergence and maintains a cohesive aesthetic.

Related Skills

Explore More Software Engineering Skills→
IwatsukaYuraIwatsukaYura

frontend-design

Define and enforce a cohesive visual system for frontend interfaces.

Community
Advanced
pepecczpepeccz

radix-tailwind

Implement Radix UI and Tailwind CSS patterns for MSI-a admin panels.

Community
Advanced
deomiarndeomiarn

design-system-creator

Generate design tokens, CSS variables, and Tailwind extensions for web design systems.

Community
Advanced
kivakiva
4

kiva-tailwind

Configure and review Tailwind CSS v3 utilities using the @kiva/kv-tokens preset.

Official
Intermediate