skills.rest
Shawnchee
ShawncheeCOMMUNITY
Explore all skills by this author →
Website𝕏@NotShawnCheeGitHub

frontend-god-mode

Apply DESIGN.md design tokens to React, Next.js, Vue, and Svelte UI tasks.

14|Updated May 10, 2026
Search Tags:#typography#accessibility#frontend#color#design-system#motion
One-click install
npx skills add https://github.com/Shawnchee/frontend-god-mode --skill frontend-god-mode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-god-mode
Source: https://github.com/Shawnchee/frontend-god-mode/tree/main/frontend-god-mode
Command: npx skills add https://github.com/Shawnchee/frontend-god-mode --skill frontend-god-mode

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend God Mode solves the problem of generating premium, production-grade UIs by applying a centralized design system and guardrails—typography, color, motion, layout, accessibility, and copy—across projects, ensuring consistency and preventing generic AI aesthetics.

Core Features & Use Cases

  • Establishes a persistent DESIGN.md token memory and enforces tokens across sessions.
  • Polishes typography, color palettes, motion, spacing, and accessibility for premium interfaces.
  • Guides multi-framework UI tasks (Next.js, React, Vue, Svelte) with layout patterns that avoid dated defaults.
  • Integrates with design references (references/*) to keep the UI language aligned with tokenized rules.

Quick Start

Describe your UI brief and I will apply production-grade design tokens to deliver a premium frontend.

Frequently Asked Questions about frontend-god-mode

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

FAQPage Schema
How do I apply a production-grade design system to a React or Next.js UI?▼

To apply a production-grade design system to React or Next.js, enforce centralized tokens for typography, color, and motion. This ensures consistent aesthetics across components while preventing generic AI styling through a reference-driven workflow.

What is the best way to avoid generic AI frontend styling in generated components?▼

The best way to avoid generic AI frontend styling is to apply curated design references and strict token memory. Enforcing layout patterns and accessibility guidelines prevents dated defaults and ensures premium interfaces.

Can I use a centralized design token system across Vue and Svelte projects?▼

Yes, you can use a centralized design token system across Vue and Svelte projects. A persistent token memory applies typography, color, and motion rules consistently across multiple frontend frameworks.

How do I polish typography and color palettes for premium frontend interfaces?▼

To polish typography and color palettes for premium frontend interfaces, apply a centralized design system that enforces specific tokens. This aligns visual language with accessibility guidelines and responsive layout patterns.

Does enforcing DESIGN.md tokens improve accessibility in frontend UI tasks?▼

Enforcing DESIGN.md tokens improves accessibility in frontend UI tasks by standardizing color contrast, typography scaling, and layout spacing. This ensures responsive layouts meet accessibility guidelines consistently.

Related Skills

Explore More Design & Creative Skills→
Intense-VisionsIntense-Visions
18

harness-design-web

Generate token-bound web components for React, Vue, or Svelte projects.

Official
Advanced
aaltaayaaltaay

design-taste-frontend

Enforce typography, color, layout, and motion rules for React/Next.js UI components.

Community
Advanced
akshh229akshh229
1

ckm:design-system

Establish a three-layer token architecture with CSS variables for theming.

Community
Advanced
soq123soq123

recreate-screenshot

Reproduce a UI screen from a screenshot with pixel-perfect fidelity.

Community
Intermediate