Frontend Architecture Pro

Provides expertise in CSS architecture, layout frameworks, responsive design, component naming, design tokens, and theme toggle for frontend projects.

Security Scan

This is an instruction-only frontend architecture skill whose requirements and instructions match its stated purpose and do not request credentials, installs, or network access.

Purpose & Capability

The name and description (CSS architecture, tokens, layout, theme toggle) match the provided SKILL.md and reference files. No unexpected binaries, environment variables, or external services are requested.

Instruction Scope

Runtime instructions are documentation-style architecture guidance (token system, layout, component hierarchy, theme toggle). The only runtime-like code is a small ThemeManager JS snippet that manipulates localStorage and the DOM — appropriate for a frontend theming feature. The SKILL.md does not direct the agent to read unrelated files, access secrets, or transmit data to external endpoints.

Install Mechanism

There is no install spec and no code files that would be written/executed by an installer. This is instruction-only documentation, which is the lowest-risk install model.

Credentials

The skill requires no environment variables, credentials, or config paths. The ThemeManager uses only browser localStorage and DOM APIs, which is proportional to the stated purpose.

Persistence & Privilege

The skill is not marked always:true and does not request persistent system privileges or modify other skills. It is user-invocable and may be invoked autonomously (platform default), which is expected for an agent skill.

Assessment

This skill is documentation and code snippets for frontend architecture and is internally consistent with its stated purpose. There are no required credentials or install steps, and the only code modifies browser state (localStorage/DOM) which is normal for a theme toggle. Before using, you may want to: 1) review and adapt the ThemeManager snippet to your project's accessibility and state management patterns; 2) confirm license/source provenance if you need an audited origin (README links to a GitHub repo and clawhub widget but the skill source is listed as unknown); and 3) when letting an autonomous agent use this skill, ensure the agent has no elevated access to repositories or secrets—this skill itself does not request them.

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)

Reference Files

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