skills.rest
jiushiwon
jiushiwonCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-foundry

Generate, refactor, and audit frontend UIs with design tokens and Node.js scripts.

44|11|Updated Jun 1, 2026
Search Tags:#design systems#design tokens#ui generation#accessibility audit#brand styling#frontend ui#react vue uniapp
One-click install
npx skills add https://github.com/jiushiwon/wg-skills --skill frontend-ui-foundry
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-foundry
Source: https://github.com/jiushiwon/wg-skills/tree/main/frontend-ui-foundry
Command: npx skills add https://github.com/jiushiwon/wg-skills --skill frontend-ui-foundry

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Frontend UI Foundry prevents inconsistent, generic, and difficult-to-maintain interfaces by providing a structured workflow for generating, refactoring, auditing, and standardizing frontend projects across scenarios, brands, design systems, and technology stacks.

Core Features & Use Cases

  • Scenario-Based UI Generation: Create production-oriented interfaces for responsive mobile, corporate websites, admin dashboards, marketing pages, documentation sites, financial applications, native mobile apps, and immersive 3D experiences.
  • Design System Optimization: Extract, inject, export, and unify colors, typography, spacing, radii, shadows, motion, and layout tokens across existing projects.
  • Brand and Stack Adaptation: Apply visual styles from supported brands and adapt implementation guidance for HTML with Tailwind, React with Next.js, Vue with Nuxt, uni-app, React Native, and Svelte.
  • Design and Code Auditing: Review accessibility, responsiveness, performance, security, maintainability, and common AI-generated design anti-patterns.
  • Deterministic Project Analysis: Detect frontend technology stacks, extract design-token usage, match projects to palette profiles, and verify output quality with Node.js utility scripts.
  • Use Case: For example, use the skill to audit an existing Vue dashboard, identify its current design tokens, align it to a coherent brand system, preserve its business logic, and produce a verified visual refactor with rollback guidance.

Quick Start

Ask the frontend UI foundry skill to generate a Stripe-style marketing landing page in React with Next.js, including design tokens and an accessibility review.

Frequently Asked Questions about frontend-ui-foundry

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

FAQPage Schema
How do I unify design tokens across an existing frontend project?▼

To unify design tokens, you can extract colors, typography, spacing, radii, shadows, and motion from existing projects, then inject, export, and standardize them across your design system using deterministic Node.js scripts. This ensures maintainable and consistent interfaces.

Can I generate a consistent UI for different frameworks like React, Vue, and Svelte?▼

Yes, UI generation and brand styling adaptation support React with Next.js, Vue with Nuxt, uni-app, React Native, Svelte, and HTML with Tailwind. The skill detects the frontend technology stack and provides implementation guidance specific to that framework.

What is the best way to audit an existing dashboard for accessibility and AI design anti-patterns?▼

The best way to audit a dashboard is to run a design and code review that checks accessibility, responsiveness, performance, security, and maintainability. The process specifically identifies common AI-generated design anti-patterns to prevent generic-looking interfaces.

Does the design system refactoring process preserve my existing business logic?▼

Yes, the refactoring process preserves your existing business logic. When you align a project to a coherent brand system, it focuses on visual refactoring and design token standardization while keeping the underlying functionality intact and providing rollback guidance.

How do I apply brand styling to a marketing landing page?▼

You apply brand styling by providing scenario and brand references to generate a production-oriented interface. The skill matches your project to palette profiles and applies the visual styles from supported brands to create a polished, consistent marketing page.

Related Skills

Explore More Design & Creative Skills→
wachawowachawo

ckm:brand

Manage brand identity and validate marketing asset compliance with Node.js scripts.

Community
Advanced
KyaniteLabsKyaniteLabs
3

art-direction

Establish visual direction for web UI imagery with documented asset constraints.

Official
Advanced
jtgironjtgiron

tailwind-css-patterns

Standardize Tailwind CSS styling for responsive React, Vue, and Svelte components.

Community
Intermediate
idontcarlidontcarl

figma-implement-design

Convert Figma designs into UI code with design-token integration.

Community
Advanced