Tidyfactor Design

Code-native UI design lifecycle engine (Figma alternative) with Contextual Decision Layer (CDL). Supports all 7 design stages with zero per-page CSS/JS and pluggable CSS foundations (Native, Tailwind, daisyUI, Pico, Hybrid). Trigger on commands 'brief', 'study', 'init', 'brand', 'tokens', 'palette', 'layout', 'components', 'page', 'dashboard', 'motion', 'i18n', 'audit', 'deploy', or design system requests.

7 starsFrontend & Design

Install

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

npx skills add TidyFactor/Design --skill tidyfactor-design

Manual install

git clone --depth 1 https://github.com/TidyFactor/Design.git /tmp/Design
mkdir -p ~/.claude/skills
cp -r /tmp/Design/. ~/.claude/skills/tidyfactor-design

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

From the SKILL.md

# TidyFactor Design (Code-Native UI Design Lifecycle Engine)

A command dispatcher supporting the full UI design lifecycle—from discovery through developer handoff—with zero build steps and complete design system consistency.

## Commands

| User intent | Command | What it loads |
|---|---|---|
| Strategic Discovery & Brief Resolution | `references/commands/brief.md` | `workflows/brief.md` + `memory/decision-points.md` + `memory/06-quality-bar.md` |
| Extract design DNA from reference | `references/commands/study.md` | `commands/study.md` + `memory/01-design-schools.md` + `memory/06-quality-bar.md` |
| Start brand-new design system / prototype | `references/commands/init.md` | `workflows/init-prototype.md` + `memory/architecture.md` + `memory/foundations.md` |
| Scaffold or manage brand tokens (YAML / JSON) | `references/commands/brand.md` | `commands/brand.md` + `memory/11-brand-json-v2.md` |
| Mood-routed typography pairing | `references/commands/typography.md` | `commands/typography.md` + `memory/12-typography-matrix.md` |
| Select design school & movement | `references/commands/school.md` | `commands/school.md` + `memory/01-design-schools.md` |
| Design tokens, palette & color extraction | `references/commands/tokens.md` | `commands/tokens.md` + `memory/02-design-tokens.md` |
| Asset hygiene, media & image optimization | `references/commands/assets.md` | `commands/assets.md` + `memory/10-python-tooling.md` |

Read the full skill on GitHub

Details

Skill name: tidyfactor-design
Repository: TidyFactor/Design
Repo updated: 5 September 2026

FAQ

What does the Tidyfactor Design skill do?

How do I install the Tidyfactor Design skill?

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

Is Tidyfactor Design popular?

It lives in TidyFactor/Design, which has 7 GitHub stars and 0 forks.

Related skills

Wedding Invitation

wyx-sg/wedding-invitation-skill

Use this skill when the user wants to design and generate a wedding invitation card in any language. The skill drives a conversational workflow — you gather the couple's info and style preferences, design a bespoke HTML template from scratch (no template selection), render it locally with headless Chrome, produce a print-ready PNG, and include a live tweak panel so the user can adjust colors, fonts, frames, and optional components without rebuilding. All data stays on the user's machine; no cloud, no signups, no data leaves.

Frontend & Design

Game UI Mobile Friendly Design

dungnotnull/game-ui-mobile-friendly-design-agent-skill

Mobile-Friendly Game UI Design & Touch-Friendly Interaction — Bulletproof production-grade harness for Mobile Game UI/UX & Touch Interaction Design analysis with zero placeholder code. Use this skill whenever the user asks for mobile game UI evaluation, touch interaction design, gesture discoverability analysis, accessibility assessment for games, one-handed mobile usability, thumb zone layout optimization, Fitts's Law application to touch targets, colorblind accessibility in games, or any mobile game interface design question. This skill provides evidence-backed analysis with academic citatio

Frontend & Design

Yafa UI Dashboard

rejourneyco/yafa-ui-dashboard

Design, build, refactor, or review polished responsive analytics dashboards, SaaS admin dashboards, business intelligence interfaces, and data-heavy product UI using Yafa-UI. Covers sidebar navigation, one-row page headers, multi-color KPI cards, charts, tables, filters, Lucide icons, accessible states, and mobile dashboard layouts across React, Next.js, Tailwind CSS, Vue, Svelte, and other frontend stacks. Do not use this visual system as the default for marketing sites, authentication, setup wizards, account or billing settings, or unrelated public pages.

Frontend & Design

Design Psychology

Fh-Ndiritu/design-psychology-skill

Audit or build any website/UI against research-backed conversion and design-psychology principles (Hick's Law, Von Restorff, Goal Gradient, Peak-End, Fitts's Law, the Aha moment, loss aversion, social proof, feedforward, labor illusion, and ~50 more). Use when reviewing a live URL or a local codebase for conversion/UX quality, or when designing or editing any user-facing surface — landing pages, pricing, onboarding, CTAs, forms, empty states, error flows, mobile screens. Auto-detects whether the target is a live URL or local source files. Brand-agnostic: derives the product's own tokens and vo

Frontend & Design

Apple Design

bowen31337/apple-design

Build web interfaces (HTML/CSS/JS, React, Vue, Tailwind) that look and feel like Apple made them — the real Apple aesthetic, not generic glassmorphism. Covers Liquid Glass / iOS-26 materials as rendered CSS+SVG (specular highlights, refraction, vibrancy, fallbacks), Apple's fluid-motion physics (springs by damping/response, velocity handoff, momentum projection, interruptibility, rubber-banding) implemented in BOTH Motion (motion.dev) and GSAP (Flip, ScrollTrigger, SplitText, Inertia), SF typography optics, a drop-in Apple design-token layer, and complete copy-paste components (glass nav, spri

Frontend & Design

Brand Guidelines

piaoyinghuang/brand-consistency-ai-skill

Universal brand guideline engine for producing, reviewing, and suggesting brand-compliant marketing materials for ANY company. Use this skill whenever a task involves brand identity, visual consistency, marketing collateral, or corporate design standards. Triggers include: brand guidelines, brand book, visual identity, corporate identity, brand compliance, brand review, brand audit, marketing materials, social media copy, poster design, banner design, PPT template, presentation template, company brochure, brand colors, typography guidelines, tone of voice, brand voice, logo usage, brand assets

Frontend & Design

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