frontend-design

Name: frontend-design
Availability: InStock
Author: charitablebusinessronin

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

Updated Mar 18, 2026

Search Tags:#design #accessibility #frontend #tailwind #tokens #ux

Ready to run

npx skills add https://github.com/Charitablebusinessronin/Allura_Memory --skill frontend-design-charitablebusinessronin

💬 Prompt for ChatGPT / Claude Chat▼

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.