skills.rest
AlphaBitCore
AlphaBitCoreOFFICIAL
Explore all skills by this author →
GitHub

frontend-arch-review

Detect design-token violations in Nexus Gateway UI CSS and inline styles.

21|3|Updated May 26, 2026
Search Tags:#theming#architecture#frontend#tailwind#lint#report#design-tokens
One-click install
npx skills add https://github.com/AlphaBitCore/nexus-gateway --skill frontend-arch-review
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-arch-review
Source: https://github.com/AlphaBitCore/nexus-gateway/tree/main/.claude/skills/frontend-arch-review
Command: npx skills add https://github.com/AlphaBitCore/nexus-gateway --skill frontend-arch-review

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit the Control Plane UI + Agent Dashboard against the design-token / CSS framework architecture, including the Tailwind v4 + shadcn surface and the prime-shadcn-tokens.css @theme {} palette. Detects theme/mode-breaking offenders: hex / rgba / hsla literals in *.module.css, hex / rgba inside style={{}} blocks in *.tsx, raw numeric padding / margin / gap / fontSize / fontWeight in inline styles, stale var(--xxx, FALLBACK) patterns referencing token names that don't exist, Recharts charts that hardcode hex outside the sanctioned chartColors.ts, raw Tailwind palette utilities (bg-white, text-gray-500, dark:bg-zinc-900, etc.) that bypass the semantic shadcn tokens, and i18n hardcoded English strings (delegated to i18n-gap-check). Produces a Markdown report with per-file violation counts, suggested token mappings, and a punch list ranked by theme/mode impact. Trigger keywords: frontend arch review, frontend architecture review, design token check, theme audit, mode audit, css framework check, tailwind audit, shadcn audit, /frontend-arch-review.

Core Features & Use Cases

  • Detects CSS literal color values in module CSS and inline styles to ensure tokens drive theming across themes.
  • Flags stale CSS variable fallbacks, hardcoded strings, and improper chart color usage to preserve theme integrity.
  • Generates a structured Markdown report with per-file counts, recommended token mappings, and a prioritized punch list for remediation.

Quick Start

Run the frontend-arch-review analysis on the UI codebase to generate a design-token compliance report.

Frequently Asked Questions about frontend-arch-review

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

FAQPage Schema
How do I audit my frontend architecture for design-token violations?▼

Audit frontend architecture by scanning your UI codebase for hex or rgba literals in CSS modules and inline styles, detecting hardcoded Tailwind utilities, and flagging stale CSS variable fallbacks to ensure theme integrity. The process generates a structured Markdown report with per-file violation counts and a prioritized remediation punch list.

Why does my Tailwind theme break when switching between light and dark modes?▼

Your Tailwind theme breaks when raw palette utilities like bg-white or dark:bg-zinc-900 bypass the semantic shadcn tokens, or when hardcoded hex and hsla literals override the @theme palette. Scanning for these inline style literals and raw utilities identifies the offending files causing mode-switch failures.

How do I find hardcoded colors in Recharts components?▼

Find hardcoded colors in Recharts by checking for hex values applied outside the sanctioned chartColors.ts file. The architecture review flags any chart components using raw color literals instead of the centralized chart color tokens, preserving theme consistency across data visualizations.

What is a stale CSS variable fallback in a design-token system?▼

A stale CSS variable fallback occurs when var(--xxx, FALLBACK) patterns reference token names that no longer exist in your prime-shadcn-tokens.css @theme palette. Detecting these stale references prevents silent style breakages when the design-token system updates.

How do I check for hardcoded English strings in my frontend codebase?▼

Check for hardcoded English strings by running an i18n gap analysis across your TSX and CSS files. The frontend architecture review delegates hardcoded string detection to a dedicated i18n-gap-check process, ensuring all UI text flows through the internationalization layer.

Does the design-token audit work with Tailwind v4 and shadcn?▼

The design-token audit works directly with Tailwind v4 and the shadcn surface, validating your codebase against the prime-shadcn-tokens.css @theme palette. It requires access to the design-token guard scripts and a chart color guidance source to accurately map raw utilities to semantic tokens.

Related Skills

Explore More Software Engineering Skills→
PolicyEnginePolicyEngine

policyengine-tailwind-shadcn

Bridge PolicyEngine design tokens to Tailwind v4 utilities via @theme inline blocks.

Official
Intermediate
TimeKastTimeKast

kb-design-tokens

Converts hardcoded UI styles to reusable tokens via Tailwind's @apply.

Official
Advanced
cyhinversecyhinverse

i18n-localization

Detect hardcoded strings and missing locale keys in React, Vue, and Python codebases.

Community
Intermediate
yaresimeonthomasyaresimeonthomas

shadcn-customization

Centralize shadcn/ui theme changes via semantic CSS variables.

Community
Intermediate