skills.rest
Charitablebusinessronin
CharitablebusinessroninCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Enforce brand tokens and WCAG accessibility across Next.js and Tailwind projects.

Updated Mar 18, 2026
Search Tags:#design#accessibility#frontend#tailwind#tokens#ux
One-click install
npx skills add https://github.com/Charitablebusinessronin/Allura_Memory --skill frontend-design-charitablebusinessronin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Charitablebusinessronin/Allura_Memory/tree/main/.opencode/skills/frontend-design
Command: npx skills add https://github.com/Charitablebusinessronin/Allura_Memory --skill frontend-design-charitablebusinessronin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams struggle to maintain brand coherence and accessibility across complex frontend stacks, leading to inconsistent visuals and rework.

Core Features & Use Cases

  • Shape briefs, 3-direction exploration (Conservative, Distinctive, Experimental)
  • Tokens-driven styling with Next.js 14 + Tailwind + ForceGraph2D
  • Systematize into tokens, layout rules, and component contracts for handoff to Woz
  • Audit and harden for accessibility, responsiveness, and motion

Quick Start

Shape a brief, generate three design directions, and select one for implementation.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I maintain frontend design consistency across Next.js and Tailwind projects?▼

Frontend design consistency is maintained by enforcing brand tokens and a repeatable shape-explore-audit workflow across your Next.js and Tailwind projects. This approach systematizes styling into tokens, layout rules, and component contracts to eliminate inconsistent visuals and rework.

What is the best way to explore frontend design directions before implementation?▼

The best way to explore design directions is through a three-direction exploration process: Conservative, Distinctive, and Experimental. This method shapes a brief and generates distinct variations, allowing you to select the optimal direction for implementation handoff.

How do I audit Tailwind components for WCAG accessibility?▼

Auditing Tailwind components for WCAG accessibility involves applying pre-implementation gates that harden designs for accessibility, responsiveness, and motion. This audit step ensures brand tokens meet compliance standards before final implementation handoff.

Does this frontend design workflow support Next.js 14 and ForceGraph2D?▼

Yes, the frontend design workflow supports Next.js 14 and ForceGraph2D. It applies tokens-driven styling and systematizes layout rules and component contracts specifically for these stacks, ensuring brand coherence across complex frontend implementations.

Why does my frontend design system lack brand coherence during component handoffs?▼

Frontend design systems lack brand coherence during handoffs when they fail to enforce design tokens and component contracts. Implementing token governance and a structured shape-explore-audit workflow ensures consistent visuals and reduces rework across complex stacks.

Related Skills

Explore More Design & Creative Skills→
manhthien2005manhthien2005

fixnow-bootstrap

Bootstraps a Next.js project with Tailwind, Drizzle ORM, NextAuth, and shadcn/ui structure and dependencies.

Community
Intermediate
Randy-C-XRandy-C-X

frontend-design

Translate design requirements into tokens, components, and layout patterns for frontend interfaces.

Community
Advanced
rickylabsrickylabs

fresh-ui-horizontal

Automate Fresh UI design-system slice implementation in Harness v3 environments.

Community
Advanced
projectedanxprojectedanx
1

design-md

Manage design tokens and component specifications in machine-readable DESIGN.md files.

Community
Intermediate