AI UIconfig Skill

Refactor an existing SwiftUI project into a governed UI architecture with render-state boundaries, tokenized styling, preview mocks, and a debug-only runtime tuning + writeback tool. Use when the user wants to improve UI maintainability, live-tune styles, or build a reusable UI debugging workflow without changing the product's visual intent.

5 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add voderment/AI-UIconfig-skill --skill AI-UIconfig-skill

Manual install

git clone --depth 1 https://github.com/voderment/AI-UIconfig-skill.git /tmp/AI-UIconfig-skill
mkdir -p ~/.claude/skills
cp -r /tmp/AI-UIconfig-skill/. ~/.claude/skills/AI-UIconfig-skill

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# AI-UIconfig-skill

Turn an existing SwiftUI project into a UI system that is:

- easier to debug
- safer to refactor
- previewable in isolation
- adjustable at runtime in `DEBUG`
- able to write approved style values back into source

This skill is optimized for SwiftUI apps on Apple platforms. It is especially useful when a project already has a meaningful UI but the UI code is mixed with runtime logic, styling is hardcoded across many views, and designers/developers need faster visual iteration.

## Default Principle

The default mode is **preserve mode**:

- Do **not** intentionally redesign the product.
- Do **not** change behavior or visual output unless required to create safe structure.
- Prefer equivalent refactors over aesthetic changes.
- The goal is to improve **control**, not to impose a new design.

Only switch to **extend mode** when the user explicitly wants new UI to be brought into the same system.

## Preserve Mode vs Extend Mode

### Preserve Mode

Use for existing UI that already ships or already has product intent.

In preserve mode:

- keep existing visuals materially unchanged
- keep existing interaction behavior materially unchanged
- extract styles into governed tokens/metrics
- split runtime orchestration from pure UI
- add previews, mocks, tuning tools, and writeback

### Extend Mode

Use when the user has already added new UI or explicitly wants new UI added.

In extend mode:

- this skill does **not** invent the design language for the new UI

Read the full skill on GitHub

Details

Skill name: AI-UIconfig-skill
Repository: voderment/AI-UIconfig-skill
License: MIT
Repo updated: 22 April 2026

FAQ

What does the AI UIconfig Skill skill do?

How do I install the AI UIconfig Skill skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add voderment/AI-UIconfig-skill --skill AI-UIconfig-skill. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is AI UIconfig Skill popular?

It lives in voderment/AI-UIconfig-skill, which has 5 GitHub stars and 0 forks.

Related skills

Ascii Shader Tsx

Codeptor/ascii-shader-tsx

Generate animated ASCII art, dithered visuals, and shader-like effects as self-contained React/TSX components. Use when the user wants to create ASCII backgrounds, dithered image/video effects, CRT/retro overlays, matrix rain, noise fields, halftone patterns, particle systems, braille art, terminal aesthetics, or any text/character-based visual effect for the web. Supports both generative (procedural, no input) and source-based (images, video, webcam to ASCII) modes. Also triggers when the user wants to convert an image to ASCII, add a dither effect, create a canvas shader component, build a r

Frontend & Design

Toutour

matt-ye/Toutour

Add a spotlight onboarding tour to any website. Analyzes the site's layout, tabs and UI components, interviews the developer (step granularity, mask, languages, theming, trigger mode, library), then generates and Playwright-verifies a guided tour. Use when the user asks for an onboarding tour, product tour, guided walkthrough, coach marks, feature introduction overlay, or says users can't figure out their site.

Frontend & Design

Design Mapper Skill

bilioveloso/design-mapper-skill

Intelligent design brief router. Takes any design request and emits a structured routing plan — which skills to load, in what order, with what focus parameters. Always load this skill FIRST when receiving a design brief. It is the entry point for the entire modular design system. Trigger on: "design a", "create UI for", "branding for", "what should it look like", "color scheme for", "design brief", "visual identity", "/design", intent=design_brief.

Frontend & Design

Sprite Forge

isabellagreco1997/sprite-forge

Turn any pixel-art image (real or AI-generated) into clean game sprites, new poses and animations (idle, walk) that keep the character consistent. Use when asked to extract a character from a screenshot, make a sprite, re-pose a sprite, animate a pixel character, build a walk/idle cycle, or put an animated sprite back into its scene.

Frontend & Design

Design Review

humbleteam/design-review

Run a structured UX critique on a screenshot, URL, or HTML snippet - a 0-4 score, up to 6 prioritized issues each with Before/After/Why, and one citation per claim. Given two or more variants, compares them on shared dimensions and names a winner. Given a screen plus a decision question, answers the question with the screen as evidence instead of returning a critique. Trigger phrases - "review this design", "critique this screen", "what's wrong with this UI", "score this design", "which of these two is better", "did the redesign improve this", "should I use a modal or a drawer". Do not use for

Frontend & Design

Mente Designer

eulucasduty/mente-designer

DNA de design de 20 sites premium (engenharia reversa via DevTools) — a fórmula Webflow/HTML + Lenis + GSAP/ScrollTrigger destilada em leis, calibres medidos e 22 efeitos nomeados com código. Use ao criar landing pages animadas, sites com scrollytelling, heroes tipográficos, vídeo-fundo, marquees, pin/scrub ou qualquer página que precise de "feel" de agência de elite.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.