FreePublished on GitHub

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.

The English summary is being prepared. Showing the original description.

TidyFactor/Design

Works withFigma

See how to install

Files included (200)

SKILL.md5.3 KB
.agents/skills/tidyfactor-design/references/commands/_template.md866 B
.agents/skills/tidyfactor-design/references/commands/assets.md1.7 KB
.agents/skills/tidyfactor-design/references/commands/audit.md672 B
.agents/skills/tidyfactor-design/references/commands/brand.md4.2 KB
.agents/skills/tidyfactor-design/references/commands/brief.md5.2 KB
.agents/skills/tidyfactor-design/references/commands/clone.md1.6 KB
.agents/skills/tidyfactor-design/references/commands/components.md2.5 KB
.agents/skills/tidyfactor-design/references/commands/dashboard.md2.1 KB
.agents/skills/tidyfactor-design/references/commands/deploy.md1.9 KB
.agents/skills/tidyfactor-design/references/commands/flow.md2.1 KB
.agents/skills/tidyfactor-design/references/commands/handoff.md2.3 KB
.agents/skills/tidyfactor-design/references/commands/i18n.md3.1 KB
.agents/skills/tidyfactor-design/references/commands/init.md814 B
.agents/skills/tidyfactor-design/references/commands/layout.md3.9 KB
.agents/skills/tidyfactor-design/references/commands/motion.md3.3 KB
.agents/skills/tidyfactor-design/references/commands/nav-footer.md3.6 KB
.agents/skills/tidyfactor-design/references/commands/page.md2.1 KB
.agents/skills/tidyfactor-design/references/commands/palette.md1.9 KB
.agents/skills/tidyfactor-design/references/commands/perf.md2.7 KB
.agents/skills/tidyfactor-design/references/commands/retrofit.md638 B
.agents/skills/tidyfactor-design/references/commands/school.md2.3 KB
.agents/skills/tidyfactor-design/references/commands/states.md2.1 KB
.agents/skills/tidyfactor-design/references/commands/study.md4.2 KB
.agents/skills/tidyfactor-design/references/commands/tokens.md2.1 KB
.agents/skills/tidyfactor-design/references/commands/typography.md4.4 KB
.agents/skills/tidyfactor-design/references/memory/architecture.md1.5 KB
.agents/skills/tidyfactor-design/references/memory/foundations.md2.5 KB
.agents/skills/tidyfactor-design/references/memory/philosophy.md1.1 KB
.agents/skills/tidyfactor-design/references/workflows/audit-prototype.md1.7 KB
.agents/skills/tidyfactor-design/references/workflows/clone-prototype.md2.3 KB
.agents/skills/tidyfactor-design/references/workflows/init-prototype.md1.8 KB
.agents/skills/tidyfactor-design/references/workflows/retrofit-prototype.md1016 B
.agents/skills/tidyfactor-design/SKILL.md5.7 KB
.claude-skill/references/commands/_template.md866 B
.claude-skill/references/commands/assets.md1.7 KB
.claude-skill/references/commands/audit.md672 B
.claude-skill/references/commands/brand.md4.2 KB
.claude-skill/references/commands/brief.md5.2 KB
.claude-skill/references/commands/clone.md1.6 KB
.claude-skill/references/commands/components.md2.5 KB
.claude-skill/references/commands/dashboard.md2.1 KB
.claude-skill/references/commands/deploy.md1.9 KB
.claude-skill/references/commands/flow.md2.1 KB
.claude-skill/references/commands/handoff.md2.3 KB
.claude-skill/references/commands/i18n.md3.1 KB
.claude-skill/references/commands/init.md814 B
.claude-skill/references/commands/layout.md3.9 KB
.claude-skill/references/commands/motion.md3.3 KB
.claude-skill/references/commands/nav-footer.md3.6 KB
.claude-skill/references/commands/page.md2.1 KB
.claude-skill/references/commands/palette.md1.9 KB
.claude-skill/references/commands/perf.md2.7 KB
.claude-skill/references/commands/retrofit.md638 B
.claude-skill/references/commands/school.md2.3 KB
.claude-skill/references/commands/states.md2.1 KB
.claude-skill/references/commands/study.md4.2 KB
.claude-skill/references/commands/tokens.md2.1 KB
.claude-skill/references/commands/typography.md4.4 KB
.claude-skill/SKILL.md5.7 KB
.github/CODE_OF_CONDUCT.md2.1 KB
.github/CONTRIBUTING.md1.5 KB
.github/dependabot.yml373 B
.github/ISSUE_TEMPLATE/bug_report.yml1.6 KB
.github/ISSUE_TEMPLATE/config.yml377 B
.github/ISSUE_TEMPLATE/feature_request.yml1.0 KB
.github/PULL_REQUEST_TEMPLATE.md725 B
.github/SECURITY.md1.1 KB
.github/workflows/ci.yml864 B
.github/workflows/release.yml1.1 KB
.gitignore387 B
.tidyfactor1.0 KB
AGENTS.md7.4 KB
assets/blog.png1.5 MB
assets/content_layout.png53.7 KB
assets/content_output.png1.5 MB
assets/dark.png1.5 MB
assets/dashboard_layout.png55.0 KB
assets/dashboard_output.png1.5 MB
assets/ecommerce_layout.png51.9 KB
assets/ecommerce_output.png1.5 MB
assets/github-social-preview-2.png1.0 MB
assets/github-social-preview.png999.1 KB
assets/hero-banner.png240.7 KB
assets/light.png1.5 MB
assets/media_layout.png55.6 KB
assets/media_output.png1.7 MB
assets/og-default.png240.7 KB
assets/video.png1.7 MB
bin/add-skill.js3.3 KB
bin/create-kit.js12.8 KB
bin/remove-skill.js4.8 KB
brand.json7.4 KB
brand.yaml5.8 KB
CHANGELOG.md27.7 KB
docs/COMMANDS.ar.md13.2 KB
docs/COMMANDS.md8.9 KB
docs/GUIDE.ar.md13.3 KB
docs/GUIDE.md9.9 KB
LICENSE796 B
manifest.json6.1 KB
memory/01-design-schools.md5.0 KB
memory/02-design-tokens.md1.9 KB
memory/03-narrative-conversion.md2.3 KB
memory/04-motion-principles.md2.0 KB
memory/05-component-anatomy.md1.8 KB
memory/06-quality-bar.md7.3 KB
memory/07-consistency-contract.md1.7 KB
memory/08-arabic-bilingual.md2.5 KB
memory/09-prototype-flow.md1.7 KB
memory/10-python-tooling.md2.5 KB
memory/11-brand-json-v2.md3.9 KB
memory/12-typography-matrix.md2.1 KB
memory/13-layout-archetypes.md2.0 KB
memory/14-nav-footer-catalog.md1.9 KB
memory/15-performance-budget.md961 B
memory/16-design-movements-guide.md40.8 KB
memory/17-storytelling-industries-ux.md9.4 KB
memory/18-design-decision-engine.md6.2 KB
package.json1.5 KB
publish_npm.py427 B
README.ar.md50.6 KB
README.de.md5.9 KB
README.es.md6.4 KB
README.fa.md8.1 KB
README.fr.md6.4 KB
README.md33.3 KB
README.pt.md6.1 KB
README.zh.md5.9 KB
references/commands/_template.md866 B
references/commands/assets.md1.7 KB
references/commands/audit.md672 B
references/commands/brand.md4.3 KB
references/commands/brief.md5.2 KB
references/commands/clone.md1.6 KB
references/commands/components.md2.5 KB
references/commands/dashboard.md2.1 KB
references/commands/deploy.md1.9 KB
references/commands/flow.md2.1 KB
references/commands/handoff.md2.7 KB
references/commands/i18n.md3.1 KB
references/commands/init.md814 B
references/commands/layout.md3.9 KB
references/commands/motion.md3.3 KB
references/commands/nav-footer.md3.6 KB
references/commands/page.md2.1 KB
references/commands/palette.md1.9 KB
references/commands/perf.md2.7 KB
references/commands/retrofit.md638 B
references/commands/school.md2.3 KB
references/commands/states.md2.1 KB
references/commands/study.md4.2 KB
references/commands/tokens.md2.1 KB
references/commands/typography.md4.4 KB
references/foundations/daisyui.md2.4 KB
references/foundations/hybrid.md1.5 KB
references/foundations/native.md1.5 KB
references/foundations/tailwind-utility.md1.8 KB
references/memory/01-design-schools.md5.7 KB
references/memory/02-design-tokens.md2.3 KB
references/memory/03-narrative-conversion.md2.3 KB
references/memory/04-motion-principles.md4.3 KB
references/memory/05-component-anatomy.md3.9 KB
references/memory/06-quality-bar.md17.1 KB
references/memory/07-consistency-contract.md1.7 KB
references/memory/08-arabic-bilingual.md3.4 KB
references/memory/09-prototype-flow.md1.8 KB
references/memory/10-python-tooling.md2.4 KB
references/memory/11-brand-json-v2.md4.5 KB
references/memory/12-typography-matrix.md2.1 KB
references/memory/13-layout-archetypes.md2.0 KB
references/memory/14-nav-footer-catalog.md4.6 KB
references/memory/15-performance-budget.md997 B
references/memory/16-design-movements-guide.md40.8 KB
references/memory/17-storytelling-industries-ux.md9.4 KB
references/memory/18-design-decision-engine.md6.3 KB
references/memory/19-heritage-lanes-atmosphere.md6.4 KB
references/memory/20-brain-baas-integration.md4.2 KB
references/memory/21-eyebrow-kicker-matrix.md3.5 KB
references/memory/22-hero-section-matrix.md18.2 KB
references/memory/23-card-architecture-matrix.md11.8 KB
references/memory/24-button-cta-matrix.md7.7 KB
references/memory/25-divider-separator-matrix.md17.8 KB
references/memory/26-metrics-stat-matrix.md6.1 KB
references/memory/27-list-indicator-matrix.md6.3 KB
references/memory/28-shared-motion-primitives.md13.7 KB
references/memory/architecture.md1.9 KB
references/memory/decision-points.md7.0 KB
references/memory/foundations.md885 B
references/memory/philosophy.md3.3 KB
references/schemas/audit_design.output.schema.json1.5 KB
references/schemas/brand.schema.json1.1 KB
references/workflows/audit-prototype.md739 B
references/workflows/brief.md4.3 KB
references/workflows/clone-prototype.md856 B
references/workflows/init-prototype.md887 B
references/workflows/retrofit-prototype.md788 B
requirements.txt183 B
scripts/__pycache__/_utils.cpython-312.pyc2.9 KB
scripts/_utils.py1.9 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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`
Macrostructure layout archetype selection	`references/commands/layout.md`	`commands/layout.md` + `memory/13-layout-archetypes.md`
Navigation (N1-N9) & Footer (Ft1-Ft8) systems	`references/commands/nav-footer.md`	`commands/nav-footer.md` + `memory/14-nav-footer-catalog.md`
Add content/marketing page or app screen	`references/commands/page.md`	`workflows/init-prototype.md` + `memory/05-component-anatomy.md`
Manage shared UI components & 8-state catalog	`references/commands/components.md`	`commands/components.md` + `memory/05-component-anatomy.md`
Core Component Matrices (Eyebrow, Hero, Cards, CTA, Seams, Metrics)	`references/commands/components.md`	`memory/21-eyebrow-kicker-matrix.md` through `28-shared-motion-primitives.md`
Shared animations, scroll & motion recipes	`references/commands/motion.md`	`commands/motion.md` + `memory/04-motion-principles.md` + `memory/28-shared-motion-primitives.md`
Interactive prototype navigation flow	`references/commands/flow.md`	`commands/flow.md` + `memory/09-prototype-flow.md`
Arabic/RTL localization & bidirectional UI	`references/commands/i18n.md`	`commands/i18n.md` + `memory/08-arabic-bilingual.md`
Asset performance budget & size verification	`references/commands/perf.md`	`commands/perf.md` + `memory/15-performance-budget.md`
Structural consistency audit & quality bar	`references/commands/audit.md`	`workflows/audit-prototype.md` + `memory/06-quality-bar.md`
Extract design system from external URL/clone	`references/commands/clone.md`	`workflows/clone-prototype.md` + `memory/03-narrative-conversion.md`
Unify drifted prototype under design system	`references/commands/retrofit.md`	`workflows/retrofit-prototype.md` + `memory/07-consistency-contract.md`
Developer handoff specs & CSS variable map	`references/commands/handoff.md`	`commands/handoff.md` + `memory/11-brand-json-v2.md`
Local preview and static deployment	`references/commands/deploy.md`	`commands/deploy.md` + `memory/06-quality-bar.md`

Read only the command file that matches the request. Do not load all commands simultaneously.

Non-Negotiable Invariants

Contextual Decision Layer (CDL): Resolve design baselines via /brief or .tidyfactor/design-brief.md before emitting code.
Zero per-page CSS/JS: Every visual token and component style lives inside design-system/. Pages contain markup only.
Single CSS Foundation: Lock Native, Tailwind, daisyUI, Pico, or Hybrid once per project; never mix foundations.
Typography Discipline: Arabic display headings use El Messiri, body copy uses Tajawal. Never use Amiri for headings above 24px.
7-Axis Pre-Emit Critique: All components and layouts must be evaluated with /* Pre-emit critique: P5 H5 E5 S5 R5 V5 D5 */.

Tooling Scope (Rule 10)

Languages: Python 3 (stdlib, Pillow, rembg)
Mutations: Read-only audits (audit_design), palette token generation (extract_palette), image optimization (optimize_media)
Network: None required (100% offline deterministic execution)

Skill vs MCP Boundary (Rule 12)

Inside Skill: Static design tokens, typography pairings, layout archetypes, component matrices (21–28), and zero-build CSS templates.
MCP Layer: Companion MCP tools invocable via tidyfactor-brain's run_skill_tool(skill_id="tidyfactor-design", ...); live remote asset scraping and database operations delegate to external MCP servers.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

More skills from this repository

tidyfactor-design

Free

TidyFactor Design track — code-native UI design lifecycle engine (Figma alternative). Supports all 7 stages of UI design (Discovery, Foundation, Architecture, Components, Motion, Quality, Delivery) with zero per-page CSS/JS and zero build step. Pluggable CSS foundations (Native, Tailwind utility-first, daisyUI, Hybrid, shadcn, Pico, Bootstrap, Alpine) and full Arabic/RTL support (El Messiri/Tajawal, never Amiri above 24px). Trigger on commands "study", "brief", "init", "brand", "typography", "school", "tokens", "palette", "assets", "layout", "nav-footer", "components", "page", "dashboard", "motion", "states", "flow", "i18n", "perf", "audit", "clone", "retrofit", "handoff", "deploy", or requests like "build a design system", "UI design lifecycle", "prototype this website", "Figma alternative", "نموذج أولي تفاعلي", "صمّم لوحة تحكم".

The English summary is being prepared. Showing the original description.

TidyFactor/Design7Updated Sep 5, 2026

See all skills by TidyFactor

Report a problem with this skill

Install

Install with a command

npx skills add https://github.com/TidyFactor/Design --skill tidyfactor-design

Paste it into your terminal and run it (requires Node.js). You can choose which agents to install it for, such as Claude Code or Codex.

Ask your agent

Please install the following Agent Skill.
https://github.com/TidyFactor/Design

First review SKILL.md and the bundled files and confirm there is nothing suspicious (such as sending data externally or reading credentials). Then place it in ~/.claude/skills/tidyfactor-design/ for Claude Code, or ~/.agents/skills/tidyfactor-design/ for Codex.

Send this text to Claude Code or Codex as is. It checks the contents before installing.

View source on GitHub

Repository: TidyFactor/Design
Stars: 7
Forks: 0
Category: Design
Original language: English
Last updated: Sep 5, 2026

A skill is a set of instructions and scripts for an agent. cccskills does not guarantee that skills are safe. Review the contents before you install.