Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .tidyfactor
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
"ecosystem": "tidyfactor",
"track": "design",
"name": "tidyfactor-design",
"version": "1.5.0",
"version": "1.6.0",
"npmPackage": "@alwkala/tidyfactor-design",
"github": "https://github.com/TidyFactor/Design",
"skillFile": "../tidyfactor-design-v1.4.0.skill",
"skillFile": "../tidyfactor-design-v1.6.0.skill",
"category": "design-system",
"type": "interactive-prototyping",
"outputs": [
Expand Down
9 changes: 9 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,15 @@

All notable changes to the **[@tidyfactor/design](https://www.npmjs.com/package/@tidyfactor/design)** package will be documented in this file.

## [1.6.0] - 2026-09-01

### Added - Runtime Tooling Manifest & Egyptian Heritage Design Lanes
- **Rule 10 Runtime Tooling Contract (`manifest.json`)**: Declared portable `audit_design`, `extract_palette`, and `optimize_media` executable tooling with schema validation.
- **Automated Design Quality Auditor (`scripts/audit_design.py`)**: Standalone and MCP-compatible CLI engine scanning HTML/CSS for unicode emojis, inline styles, untokenized colors, and the 16 AI anti-patterns with UTF-8 support.
- **Output JSON Schema (`references/schemas/audit_design.output.schema.json`)**: Standard schema defining structured quality audit reports and pre-emit critique stamps.
- **Egyptian & Regional Heritage Lanes (`references/memory/19-heritage-lanes-atmosphere.md`)**: Operational design grammar covering Nilotic Wadj & Lotus, Egyptian Nubian Folk & Earth Vaults, Sinai Bedouin Craft, Al-Muqarnas Geometry, and Kufic Modernity.
- **Bilingual & Responsive Enhancements**: Refined `01-design-schools.md`, `04-motion-principles.md`, `05-component-anatomy.md`, and `08-arabic-bilingual.md`.

## [1.5.0] - 2026-08-29

### Added - Global Multi-Tier & Multi-Language Documentation Architecture
Expand Down
2 changes: 1 addition & 1 deletion README.ar.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<img src="assets/hero-banner.png" alt="TidyFactor Design Hero Banner" width="100%">
</p>

# 🎨 TidyFactor Design `v1.5.0`
# 🎨 TidyFactor Design `v1.6.0`
### محرك دورة حياة تصميم الواجهات ومحرك النماذج التفاعلية المناهض للتكرار

**البداية الرسمية لبناء نظام التصميم والدورة الكاملة لتصميم الواجهات التفاعلية ضمن منظومة TidyFactor Ecosystem.**
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<img src="assets/hero-banner.png" alt="TidyFactor Design Hero Banner" width="100%">
</p>

# 🎨 TidyFactor Design `v1.5.0`
# 🎨 TidyFactor Design `v1.6.0`
### Code-Native UI Design Lifecycle Engine & Anti-Slop Design System Suite

**The official UI design & interactive prototyping foundation for the TidyFactor Ecosystem.**
Expand Down
6 changes: 3 additions & 3 deletions brand.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"name": "TidyFactor Design",
"version": "1.5.0",
"version": "1.6.0",
"schemaVersion": "brand-core-v2",
"meta": {
"product": "TidyFactor Design System",
"tagline": "Code-Native Interactive Prototyping Engine",
"description": "A zero-bundler, framework-free design system and UI prototyping engine with pluggable CSS foundations and full Arabic/RTL support.",
"version": "1.4.0",
"lastUpdated": "2026-08-25"
"version": "1.6.0",
"lastUpdated": "2026-09-01"
},
"identity": {
"logo": {
Expand Down
Binary file modified dist/tidyfactor-design.skill
Binary file not shown.
4 changes: 2 additions & 2 deletions dist/tidyfactor-design/.tidyfactor
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
"ecosystem": "tidyfactor",
"track": "design",
"name": "tidyfactor-design",
"version": "1.5.0",
"version": "1.6.0",
"npmPackage": "@alwkala/tidyfactor-design",
"github": "https://github.com/TidyFactor/Design",
"skillFile": "../tidyfactor-design-v1.4.0.skill",
"skillFile": "../tidyfactor-design-v1.6.0.skill",
"category": "design-system",
"type": "interactive-prototyping",
"outputs": [
Expand Down
9 changes: 9 additions & 0 deletions dist/tidyfactor-design/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,15 @@

All notable changes to the **[@tidyfactor/design](https://www.npmjs.com/package/@tidyfactor/design)** package will be documented in this file.

## [1.6.0] - 2026-09-01

### Added - Runtime Tooling Manifest & Egyptian Heritage Design Lanes
- **Rule 10 Runtime Tooling Contract (`manifest.json`)**: Declared portable `audit_design`, `extract_palette`, and `optimize_media` executable tooling with schema validation.
- **Automated Design Quality Auditor (`scripts/audit_design.py`)**: Standalone and MCP-compatible CLI engine scanning HTML/CSS for unicode emojis, inline styles, untokenized colors, and the 16 AI anti-patterns with UTF-8 support.
- **Output JSON Schema (`references/schemas/audit_design.output.schema.json`)**: Standard schema defining structured quality audit reports and pre-emit critique stamps.
- **Egyptian & Regional Heritage Lanes (`references/memory/19-heritage-lanes-atmosphere.md`)**: Operational design grammar covering Nilotic Wadj & Lotus, Egyptian Nubian Folk & Earth Vaults, Sinai Bedouin Craft, Al-Muqarnas Geometry, and Kufic Modernity.
- **Bilingual & Responsive Enhancements**: Refined `01-design-schools.md`, `04-motion-principles.md`, `05-component-anatomy.md`, and `08-arabic-bilingual.md`.

## [1.5.0] - 2026-08-29

### Added - Global Multi-Tier & Multi-Language Documentation Architecture
Expand Down
2 changes: 1 addition & 1 deletion dist/tidyfactor-design/README.ar.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<img src="assets/hero-banner.png" alt="TidyFactor Design Hero Banner" width="100%">
</p>

# 🎨 TidyFactor Design `v1.5.0`
# 🎨 TidyFactor Design `v1.6.0`
### محرك دورة حياة تصميم الواجهات ومحرك النماذج التفاعلية المناهض للتكرار

**البداية الرسمية لبناء نظام التصميم والدورة الكاملة لتصميم الواجهات التفاعلية ضمن منظومة TidyFactor Ecosystem.**
Expand Down
2 changes: 1 addition & 1 deletion dist/tidyfactor-design/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<img src="assets/hero-banner.png" alt="TidyFactor Design Hero Banner" width="100%">
</p>

# 🎨 TidyFactor Design `v1.5.0`
# 🎨 TidyFactor Design `v1.6.0`
### Code-Native UI Design Lifecycle Engine & Anti-Slop Design System Suite

**The official UI design & interactive prototyping foundation for the TidyFactor Ecosystem.**
Expand Down
46 changes: 40 additions & 6 deletions dist/tidyfactor-design/bin/add-skill.js
Original file line number Diff line number Diff line change
@@ -1,31 +1,65 @@
#!/usr/bin/env node
/**
* bin/add-skill.js — CLI installer wrapper for tidyfactor-design
* bin/add-skill.js — Multi-Agent Skill Installer Wrapper for tidyfactor-design
* Supports Trae, Cursor, Windsurf, Antigravity, GitHub Copilot, RooCode, OpenCode, KiloCode, Warp, and Universal.
*
* @license Apache-2.0
*/

const fs = require('fs');
const path = require('path');
const os = require('os');

const targetDir = process.cwd();
const skillSource = path.resolve(__dirname, '..');
const agentSkillsDir = path.join(targetDir, '.agents', 'skills', 'tidyfactor-design');
const skillName = 'tidyfactor-design';

fs.mkdirSync(agentSkillsDir, { recursive: true });
const AGENT_MAP = [
{ name: 'Trae AI IDE', dir: path.join(targetDir, '.trae', 'skills', skillName), test: path.join(targetDir, '.trae') },
{ name: 'Cursor IDE', dir: path.join(targetDir, '.cursor', 'skills', skillName), test: path.join(targetDir, '.cursor') },
{ name: 'Windsurf Cascade', dir: path.join(targetDir, '.windsurf', 'skills', skillName), test: path.join(targetDir, '.windsurf') },
{ name: 'GitHub Copilot', dir: path.join(targetDir, '.github', 'prompts', skillName), test: path.join(targetDir, '.github') },
{ name: 'RooCode', dir: path.join(targetDir, '.roo', 'skills', skillName), test: path.join(targetDir, '.roo') },
{ name: 'OpenCode / Zen', dir: path.join(targetDir, '.opencode', 'skills', skillName), test: path.join(targetDir, '.opencode') },
{ name: 'KiloCode', dir: path.join(targetDir, '.kilocode', 'skills', skillName), test: path.join(targetDir, '.kilocode') },
{ name: 'Warp Terminal', dir: path.join(targetDir, '.warp', 'skills', skillName), test: path.join(targetDir, '.warp') },
{ name: 'Kiro Spec IDE', dir: path.join(targetDir, '.kiro', 'skills', skillName), test: path.join(targetDir, '.kiro') },
{ name: 'Claude Code', dir: path.join(targetDir, '.claude', 'skills', skillName), test: path.join(targetDir, '.claude') },
{ name: 'Zed AI Agent', dir: path.join(targetDir, '.zed', 'skills', skillName), test: path.join(targetDir, '.zed') },
{ name: 'Google Antigravity/Gemini', dir: path.join(targetDir, '.agents', 'skills', skillName), test: path.join(targetDir, '.agents') },
];

function copyRecursive(src, dest) {
fs.mkdirSync(dest, { recursive: true });
const entries = fs.readdirSync(src, { withFileTypes: true });
for (const entry of entries) {
const srcPath = path.join(src, entry.name);
const destPath = path.join(dest, entry.name);
if (['.git', 'node_modules', 'dist'].includes(entry.name)) continue;
if (entry.isDirectory()) {
fs.mkdirSync(destPath, { recursive: true });
copyRecursive(srcPath, destPath);
} else {
fs.copyFileSync(srcPath, destPath);
}
}
}

copyRecursive(skillSource, agentSkillsDir);
console.log('✓ Successfully injected tidyfactor-design skill into .agents/skills/tidyfactor-design');
// Determine installation targets
let mountedTargets = [];

for (const agent of AGENT_MAP) {
if (fs.existsSync(agent.test)) {
copyRecursive(skillSource, agent.dir);
mountedTargets.push(agent.name + ' (' + path.relative(targetDir, agent.dir) + ')');
}
}

// Always ensure universal fallback in .agents/skills/
const defaultDir = path.join(targetDir, '.agents', 'skills', skillName);
copyRecursive(skillSource, defaultDir);
if (!mountedTargets.some(t => t.includes('.agents'))) {
mountedTargets.push('Universal Default (.agents/skills/' + skillName + ')');
}

console.log('✨ Successfully injected ' + skillName + ' into:');
mountedTargets.forEach(t => console.log(' • ' + t));
6 changes: 3 additions & 3 deletions dist/tidyfactor-design/brand.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"name": "TidyFactor Design",
"version": "1.5.0",
"version": "1.6.0",
"schemaVersion": "brand-core-v2",
"meta": {
"product": "TidyFactor Design System",
"tagline": "Code-Native Interactive Prototyping Engine",
"description": "A zero-bundler, framework-free design system and UI prototyping engine with pluggable CSS foundations and full Arabic/RTL support.",
"version": "1.4.0",
"lastUpdated": "2026-08-25"
"version": "1.6.0",
"lastUpdated": "2026-09-01"
},
"identity": {
"logo": {
Expand Down
3 changes: 2 additions & 1 deletion dist/tidyfactor-design/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@tidyfactor/design",
"version": "1.5.0",
"version": "1.6.0",
"description": "TidyFactor Design track — code-native UI design lifecycle engine (Figma alternative) with Contextual Decision Layer (CDL)",
"main": "SKILL.md",
"bin": {
Expand Down Expand Up @@ -55,6 +55,7 @@
"assets",
"bin",
"brand.json",
"manifest.json",
"memory",
"references",
"scripts",
Expand Down
106 changes: 49 additions & 57 deletions dist/tidyfactor-design/references/memory/01-design-schools.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,46 @@
# Design Schools & Movements — Quick Calibration Index
# Design Schools & Movements — Unified Calibration Index
<!-- last-verified: 2026-09-01 -->

For complete operational rules, visual tokens, typography pairings, color systems, CSS rules, shadow styles, and anti-patterns across all 20 visual aesthetics, see:
👉 **[`memory/16-design-movements-guide.md`](16-design-movements-guide.md)** (All 20 Visual Movements & Design Tokens)
👉 **[`memory/17-storytelling-industries-ux.md`](17-storytelling-industries-ux.md)** (4 Storytelling Archetypes, 8 Industry Registers, 8 UX Philosophies)
A complete working index of design aesthetics, universal movements, and regional heritage art-direction lanes across all TidyFactor design engines.

👉 **[`memory/16-design-movements-guide.md`](16-design-movements-guide.md)** (All 20 Universal Visual Movements)
👉 **[`memory/19-heritage-lanes-atmosphere.md`](19-heritage-lanes-atmosphere.md)** (5 Egyptian & Regional Heritage Lanes)
👉 **[`memory/17-storytelling-industries-ux.md`](17-storytelling-industries-ux.md)** (Storytelling Archetypes & Industry Registers)
👉 **[`memory/18-design-decision-engine.md`](18-design-decision-engine.md)** (9-Step Decision Tree & Anti-Design-Soup Constraint)

---

## 🎨 20 Visual Aesthetics At-A-Glance Index
## 🏛️ 5 Regional & Egyptian Heritage Art-Direction Lanes

1. **Nilotic Wadj & Sacred Lotus (أصالة النيل ولوتس مصر العليا)**:
- *DNA*: Upper Egyptian heritage (Qena, Dendera, Thebes, Aswan), Sacred Lotus (`Sesen`), mineral green (`Wadj`), Nile terracotta (`Khem`), Royal Lapis (`Khesbed`), Sun Gold (`Nebu`).
- *Grammar*: Ascending registers, shallow stone deboss (`Low-Relief`), tactile papyrus & alabaster light texture (`Subtle Noise`).
- *Fits*: Community development, educational leadership, inclusive education, scholarly platforms, Upper Egyptian institutions.

2. **Egyptian Nubian Folk & Earth Vaults (النوبة المصرية والعمارة الطينية)**:
- *DNA*: Aswan & West Suhail mud-brick vaulted architecture (Hassan Fathy), geometric chevron & zigzag bands, vibrant folk warmth.
- *Grammar*: Stepped triangles, Nubian vaulted card tops, sunny ochre, turquoise cataracts, terracotta clay, white lime plaster.
- *Fits*: Cultural platforms, eco-tourism, community initiatives, youth & child development.

3. **Sinai Bedouin & Stitched Craft (البادية والتطريز السيناوي المصري)**:
- *DNA*: Authentic Sinai Bedouin cross-stitch embroidery (North & South Sinai), St. Catherine granite mountains, wild flora.
- *Grammar*: Pixelated cross-stitch geometric rails, embroidered dividers, madder red, wild rose magenta, deep Sinai night indigo, raw wool ivory.
- *Fits*: Heritage crafts, environmental foundations, field campaigns, national culture.

4. **Al-Muqarnas & Girih Geometry (التوريق والمقرنصات الهندسية)**:
- *DNA*: Historic Cairo (Fatimid & Mamluk), Andalusian & Maghrebi architecture, mashrabiya woodwork, mathematical astronomy.
- *Grammar*: 4/6/8-fold repeat geometry, architectural aperture masks, perforated shadows (`Perforated Shadowing`), cobalt lapis, turquoise glaze, antique ochre.
- *Fits*: Cultural foundations, academic conferences, endowment platforms, classical Islamic arts.

5. **Kufic Modernity & Luminescent Noor (العمارة الحروفية والنور المعاصر)**:
- *DNA*: Contemporary regional minimalism led by monumental Arabic typography and generous spatial purity.
- *Grammar*: Monumental Arabic wordmark/phrase hero, polished terrazzo, limestone, brushed bronze, single vibrant accent.
- *Fits*: Technology, sovereign wealth, venture studios, knowledge economy, international consulting.

---

## 🎨 20 Universal Visual Movements At-A-Glance Index

1. **Swiss Style**: Objective 12-column grid, sans-serif, high contrast.
2. **Flat Design**: 2D vector, zero shadows, vibrant color blocks.
3. **Material Design**: Paper/ink depth, elevation shadows, touch ripples.
Expand All @@ -29,57 +62,16 @@ For complete operational rules, visual tokens, typography pairings, color system
19. **Organic / Amorphous UI**: Fluid blob shapes (`border-radius: 60% 40% ...`), natural tones.
20. **Frutiger Aero & Y2K**: Glossy glass buttons, lens flares, vibrant sky blue/lime gradients.

## Bauhaus
Geometric shapes as structural/decorative elements, primary-plus-black
palettes, function-follows-form typography. Fits: education, design tools,
brands wanting to signal craft/foundational thinking. Avoid: costume-party
Bauhaus (circles+triangles as decoration with no structural logic).

## Brutalism (web)
Raw, unstyled-looking HTML elements used deliberately, harsh contrast,
visible grid lines, monospace accents, intentionally "undesigned". Fits:
developer tools, portfolios, brands wanting to signal authenticity/anti-
polish. Avoid: actual unstyled defaults mistaken for the aesthetic —
brutalism is a considered choice, not the absence of one.

## Editorial / Broadsheet
Hairline rules, dense multi-column text, serif display, byline/dateline
conventions borrowed from print journalism. Fits: publications, long-form
content, thought-leadership brands. Avoid: applying hairline-column density
to a page that has nothing to say at that density (see `frontend-design`'s
warning on this as an overused AI-design default).

## Minimalism
Extreme restraint, one accent color maximum, huge whitespace, type doing
almost all the work. Fits: luxury, premium single-product brands. Avoid:
minimalism as an excuse for lack of a real design decision — every
remaining element must be precisely placed.

## Glassmorphism
Frosted-glass translucent panels, soft shadows, layered depth over a
blurred background. Fits: modern consumer apps, dashboards wanting a soft/
approachable data-density feel. Avoid: layering glass panels on glass
panels — contrast and legibility break down fast.

## Material-influenced
Elevation via shadow, clear touch targets, motion as spatial logic (things
move the way physical objects would). Fits: cross-platform app UI,
utilitarian dashboards. Avoid: importing Material's specific component
shapes wholesale when the brand wants its own identity — take the
principles, not the skin.
---

## Modern SaaS (Vercel/Linear-influenced)
Near-black or pure-white grounds, one saturated accent, monospace for data/
code, tight type scale, subtle gradient accents, generous but efficient
spacing. Fits: developer tools, B2B SaaS, technical dashboards. Avoid:
defaulting here just because the brief is "a SaaS product" — this look is
common enough now to read as generic if the brand has no other point of
view.
## 🏆 Award-Winning Regional Reference Evidence
Treat award galleries as evidence of interaction and composition patterns:
- **Webook (Riyadh Season)**: Immersive event storytelling, WebGL and sound.
- **Masar Destination**: Saudi destination storytelling with responsive WebGL.
- **IoT Squared**: Sovereign technology positioning via animation & parallax without heritage cliches.
- **Kode**: New Cairo sports brand using bold color, animation, and WebGL.
- **Ali Ali**: Cairo creative portfolio driven by minimal typography and film.
- **Sivik Atelier**: Dubai studio portfolio using grid, parallax, and minimal typography.
- **Jazean Coffee**: Saudi heritage framed as interactive scroll storytelling.

## Calibration: defaults to avoid unless the brief asks for them
Per `frontend-design`'s own calibration: warm-cream + terracotta-serif,
near-black + single acid-green/vermilion accent, and broadsheet-hairline-
columns applied regardless of subject are the three most common AI-design
tells right now. Choosing one deliberately because it fits the brief is
fine; landing on one by default is the failure mode `school` exists to
prevent.
*Rule: Establish a contemporary editorial system first, then use one culturally meaningful material, narrative, or spatial idea as the signature.*
Loading
Loading