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

frontend-craft

A system that manages frontend projects with defined phases and deliverables.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires [], and includes references (resource) components.

What problem does it solve?

Shapes a guided frontend process that prevents ad-hoc UI work by enforcing a staged, audit-driven workflow across teams.

Core Features & Use Cases

  • Enforces Shape → Explore → Select → Systematize → Build → Audit → Polish → Harden as a repeatable lifecycle.
  • Establishes token authority and design-system compliance through Allura token rules and phase-specific references.
  • Provides role-based routing and RAM team guidelines for project governance and handoffs.

Quick Start

Run /frontend-craft shape to begin by clarifying intent for your frontend project.

Frequently Asked Questions about frontend-craft

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

FAQPage Schema
How do I enforce a token-driven design system in my frontend workflow?▼

Enforce a token-driven design system by applying a staged, audit-driven workflow that mandates token authority before writing UI code, ensuring selection flows in one direction from design tokens to implementation.

What is the best way to prevent ad-hoc UI work across frontend teams?▼

Prevent ad-hoc UI work by adopting a guided frontend process that enforces a repeatable lifecycle from Shape to Harden, establishing strict design-system compliance through phase-specific reference checks.

How do I audit frontend UI for accessibility and design system compliance?▼

Audit frontend UI by passing through comprehensive 8-phase quality gates prior to production, which enforce accessibility checks and token-before-code discipline to verify design-system compliance.

Can I use this frontend workflow for team project governance and production handoffs?▼

Yes, this frontend workflow supports team project governance and production handoffs by providing role-based routing and RAM team guidelines to structure the Harden phase for final delivery.

How do I start a frontend project using a staged, audit-driven workflow?▼

Start a frontend project using a staged, audit-driven workflow by clarifying project intent first, which initiates the Shape phase to define scope before moving into exploration and systematization.

Related Skills

Explore More Software Engineering Skills→
AesopScottAesopScott
1

phase-alignment

Establish the MAPS lifecycle structure by agreeing on phase names, order, and scope.

Community
Advanced
jedmamostojedmamosto

gsd-ui-phase

Generate UI-SPEC.md for a frontend phase with validated research and verification gates.

Community
Intermediate
jac007xjac007x

design-system-validator

Audit Walmart design-system compliance across tokens, components, and spacing.

Community
Advanced
dylantarredylantarre
38

angular

Build token-driven Angular components with signals and standalone components.

Community
Advanced