Frontend Architecture Pro

Provide technical UX architecture and CSS systems to establish design tokens, layout frameworks, component structure, responsive breakpoints, and theme toggles.

Security Scan

This is an instruction-only CSS/UX architecture skill whose requirements and instructions are consistent with its stated purpose and do not request credentials, installs, or unexpected privileges.

Purpose & Capability

The name/description (CSS systems, tokens, layout, theme toggles) match the SKILL.md and reference files. Nothing in the package requests unrelated tools, cloud access, or credentials.

Instruction Scope

SKILL.md and reference files contain CSS, component guidance, and a small ThemeManager JS snippet; instructions are focused on architecture, breakpoints, naming, accessibility, and handoff deliverables. They do not instruct the agent to read system files, environment variables, or contact external endpoints.

Install Mechanism

There is no install spec and no code files that would be written or executed by an installer. This instruction-only skill is low-risk from an installation perspective.

Credentials

No environment variables, credentials, or config paths are required. The ThemeManager uses localStorage and DOM APIs in-browser (expected for a theme toggle) and does not access secrets or external services.

Persistence & Privilege

Skill is not always-enabled and uses normal autonomous invocation settings. It does not request persistent system privileges or modify other skills or system configuration.

Assessment

This is an instruction-only frontend architecture skill: it provides guidelines, CSS token examples, and a small in-browser ThemeManager snippet. It does not request credentials, install software, or call external endpoints. Before using in production, review and adapt the token values, naming conventions, and ThemeManager code to your project's accessibility and security policies (the JS uses localStorage and manipulates the DOM, which is normal for a theme toggle). Also verify licensing and attribution if you will copy large parts into your codebase.

UX Architect

Technical architecture and UX specialist who gives developers solid foundations, CSS systems, and clear implementation paths.

Core Workflow

1. Assess project scope — identify what needs architectural foundation
2. Define CSS token system — colors, typography, spacing, shadows
3. Establish layout framework — container system, grid patterns, responsive breakpoints
4. Set component architecture — naming conventions, hierarchy, boundaries
5. Add theme support — light/dark/system with toggle
6. Document handoff spec — clear deliverables for developers

CSS Architecture Principles

• Design tokens first — define all CSS custom properties before writing any component styles
• Mobile-first responsive — base styles target mobile, enhance upward with min-width breakpoints
• Component naming — use hyphen-case, keep it semantic (.card-header, not .red-box)
• No !important — architecture should make specificity wars unnecessary
• Theme-agnostic by default — component styles reference tokens, not hardcoded colors

Layout System

Container Breakpoints

Name	Max-width	Target
sm	640px	Large phones
md	768px	Tablets
lg	1024px	Laptops
xl	1280px	Desktops

Grid Patterns

• Hero: Full viewport, vertically centered
• Content Grid: 2-col desktop → 1-col mobile
• Card Grid: auto-fit with minmax(300px, 1fr)
• Sidebar: 2fr main + 1fr aside

Theme System

Every new project must include light/dark/system theme toggle:

/* Light theme — default */
:root { --bg: #ffffff; --text: #111827; }

/* Dark theme */
[data-theme="dark"] { --bg: #111827; --text: #f9fafb; }

/* System preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #111827; --text: #f9fafb; }
}

Handoff Deliverables

For each project, provide:

• Full CSS token system with all custom properties
• Layout container and grid specifications
• Component hierarchy diagram
• Responsive breakpoint map
• Theme toggle implementation
• Accessibility baseline (keyboard nav, focus states, contrast)

Trigger Examples

• "set up the CSS architecture for this project"
• "build a design token system for [brand]"
• "create a [light/dark/system] theme toggle"
• "define responsive breakpoints for [device targets]"
• "establish a component naming convention"

Reference Files

• references/css-architecture.md — Full CSS system with tokens, layout, and theme patterns
• references/component-hierarchy.md — Component architecture and naming conventions