github/ui-ux-pro-max-skill
1
0
Fork 0
mirror of https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git synced 2026-09-25 05:26:15 +00:00
Code Issues Packages Projects Releases Wiki Activity
ui-ux-pro-max-skill/cli/assets/skills/ui-styling/references/canvas-design-system.md
Alexander ef5f5ba0e6
fix(cli): install all 7 skills via uipro init, not just the orchestrator (#362) (#387) 
* fix(cli): install all 7 skills via uipro init, not just the orchestrator

`uipro init` rendered only the orchestrator (ui-ux-pro-max) and never
delivered the 6 sibling skills (banner-design, brand, design,
design-system, slides, ui-styling), so users got 1 of 7 skills (#362).

- sync-assets.mjs: bundle the 6 sub-skills into cli/assets/skills/ as
  static copies (source of truth: .claude/skills/), with sync + check
  coverage. Excludes ui-styling/canvas-fonts (~5.8MB of TTF) and
  __pycache__/.pyc cruft — a skill registers from its SKILL.md, not its
  fonts — so the bundle adds ~0.9MB, not ~6.6MB.
- template.ts: after rendering the orchestrator, install each bundled
  sub-skill as a sibling. The skills parent is derived from the
  platform's skillPath (skills/ for most, prompts/ for copilot,
  steering/ for kiro) rather than hardcoded.
- uninstall.ts: remove the sub-skills too.

Verified: check:assets in sync, tsc passes, and a per-platform install
harness delivers all 7 skills to the correct parent dir with no fonts.

Closes #362

* fix(cli): filter excluded files from target side of check:assets

check:assets filtered sourceFiles with isExcludedAssetFile but not
targetFiles, so a stray cli/assets/scripts/__pycache__/*.pyc (generated
by a local Python run) was reported as an "extra asset file" and failed
the gate. Apply the same predicate to targetFiles in both the
dirsToSync and sub-skill loops.

Verified: check:assets now passes with __pycache__/*.pyc present in the
target tree; typecheck passes.

* fix(cli): uninstall from each platform's real skills dir, not hardcoded skills/

removeSkillDir() hardcoded <folder>/skills/<name>, but the installer
places skills under each platform config's skillPath parent — copilot in
.github/prompts/, kiro in .kiro/steering/. So uninstall left those
platforms' skills (orchestrator + sub-skills) behind.

Derive the install parent from loadPlatformConfig(aiType).folderStructure
(same source the installer uses), and keep the legacy <folder>/skills/
cleanup (incl. .shared/) for older installs. Deduped via a Set.

Verified: typecheck passes; an install+uninstall harness removes all 7
skills with zero leftovers for claude (.claude/skills), copilot
(.github/prompts) and kiro (.kiro/steering).

* fix(cli): re-sync bundled sub-skills after #385 stripped ckm- names

#385 merged to main and removed the ckm- prefix from the six
.claude/skills/*/SKILL.md name fields. This branch's bundled copies
under cli/assets/skills/ still carried the old ckm- names, so after the
PR merges with main the source no longer matched the bundle and the
check-asset-sync CI gate failed (stale asset file: skills/*/SKILL.md).

Merge main and regenerate the bundle so cli/assets/skills matches the
current .claude/skills source of truth. check:assets and typecheck pass.
2026-06-25 17:33:23 +07:00

7.7 KiB
Raw Permalink Blame History

Canvas Design System

Visual design philosophy, systematic composition, and sophisticated visual communication.

Design Philosophy Approach

Canvas design operates through two-phase process:

Phase 1: Design Philosophy Creation

Create visual philosophy - aesthetic movement expressed through form, space, color, composition. Not layouts or templates, but pure visual philosophy.

What is created: Design manifesto emphasizing:

  • Visual expression over text
  • Spatial communication
  • Artistic interpretation
  • Minimal words as visual accent

Philosophy structure (4-6 paragraphs):

  • Space and form principles
  • Color and material approach
  • Scale and rhythm guidance
  • Composition and balance rules
  • Visual hierarchy system

Phase 2: Visual Expression

Express philosophy through canvas artifacts:

  • 90% visual design
  • 10% essential text
  • Museum-quality execution
  • Systematic patterns
  • Sophisticated composition

Core Principles

1. Visual Communication First

Information lives in design, not paragraphs. Express ideas through:

  • Color zones and fields
  • Geometric precision
  • Spatial relationships
  • Visual weight and tension
  • Form and structure

2. Minimal Text Integration

Text as rare, powerful gesture:

  • Never paragraphs
  • Only essential words
  • Integrated into visual architecture
  • Small labels, huge impact
  • Typography as visual element

3. Expert Craftsmanship

Work must appear:

  • Meticulously crafted
  • Labored over with care
  • Product of countless hours
  • From absolute top of field
  • Master-level execution

4. Systematic Patterns

Use scientific visual language:

  • Repeating patterns
  • Perfect shapes
  • Dense accumulation of marks
  • Layered elements
  • Patient repetition rewards sustained viewing

Design Movement Examples

Concrete Poetry

Philosophy: Communication through monumental form and bold geometry.

Expression:

  • Massive color blocks
  • Sculptural typography (huge words, tiny labels)
  • Brutalist spatial divisions
  • Polish poster energy meets Le Corbusier
  • Ideas through visual weight and spatial tension
  • Text as rare, powerful gesture

Chromatic Language

Philosophy: Color as primary information system.

Expression:

  • Geometric precision
  • Color zones create meaning
  • Typography minimal - small sans-serif labels
  • Josef Albers' interaction meets data visualization
  • Information encoded spatially and chromatically
  • Words only anchor what color shows

Analog Meditation

Philosophy: Quiet visual contemplation through texture and breathing room.

Expression:

  • Paper grain, ink bleeds
  • Vast negative space
  • Photography and illustration dominate
  • Typography whispered (small, restrained)
  • Japanese photobook aesthetic
  • Images breathe across pages
  • Text appears sparingly - short phrases only

Organic Systems

Philosophy: Natural clustering and modular growth patterns.

Expression:

  • Rounded forms
  • Organic arrangements
  • Color from nature through architecture
  • Information through visual diagrams
  • Spatial relationships and iconography
  • Text only for key labels floating in space
  • Composition tells story through spatial orchestration

Geometric Silence

Philosophy: Pure order and restraint.

Expression:

  • Grid-based precision
  • Bold photography or stark graphics
  • Dramatic negative space
  • Typography precise but minimal
  • Small essential text, large quiet zones
  • Swiss formalism meets Brutalist material honesty
  • Structure communicates, not words
  • Every alignment from countless refinements

Implementation Guidelines

Subtle Reference Integration

Embed conceptual DNA without announcing:

  • Niche reference woven invisibly
  • Those who know feel it intuitively
  • Others experience masterful abstract composition
  • Like jazz musician quoting another song
  • Sophisticated, never literal
  • Reference enhances depth quietly

Color Approach

Intentional palette:

  • Limited colors (2-5)
  • Cohesive system
  • Purposeful relationships
  • oklch color space for precision
  • Each shade carries meaning

Example palette:

--color-primary: oklch(0.55 0.22 264)
--color-accent: oklch(0.75 0.18 45)
--color-neutral: oklch(0.90 0.02 264)
--color-dark: oklch(0.25 0.15 264)

Typography System

Thin fonts preferred:

  • Light weights (200-300)
  • Clean sans-serifs
  • Geometric precision
  • Small sizes for labels
  • Large sizes for impact moments

Font integration:

  • Search ./canvas-fonts directory
  • Download needed fonts
  • Bring typography onto canvas
  • Part of art, not typeset digitally

Composition Rules

Systematic approach:

  • Repeating patterns establish rhythm
  • Perfect geometric shapes
  • Clinical typography
  • Reference markers suggest imaginary discipline
  • Dense accumulation builds meaning
  • Layered patterns reward attention

Spacing discipline:

  • Nothing falls off page
  • Nothing overlaps
  • Every element within canvas boundaries
  • Proper margins non-negotiable
  • Breathing room and clear separation
  • Professional execution mandatory

Canvas Boundaries

Technical specs:

  • Single page default (multi-page when requested)
  • PDF or PNG output
  • High resolution
  • Clean margins
  • Contained composition
  • Flawless formatting

Multi-Page Design Systems

When creating multiple pages:

Approach

  • Treat first page as single page in coffee table book
  • Create more pages along same philosophy
  • Distinctly different but cohesive
  • Pages tell story tastefully
  • Full creative freedom

Consistency Elements

  • Shared color palette
  • Consistent typography system
  • Related compositional approach
  • Visual language continuity
  • Philosophical thread throughout

Variation Strategy

  • Unique twist per page
  • Different focal points
  • Varied spatial arrangements
  • Complementary patterns
  • Progressive visual narrative

Execution Checklist

Before finalizing:

  • Philosophy guides every decision
  • 90% visual, 10% text maximum
  • Text minimal and integrated
  • Nothing overlaps or falls off page
  • Margins and spacing pristine
  • Composition cohesive with art
  • Appears meticulously crafted
  • Master-level execution evident
  • Sophisticated, never amateur
  • Could be displayed in museum
  • Proves undeniable expertise
  • Formatting flawless
  • Every detail perfect

Quality Standards

What to Avoid

  • Cartoony aesthetics
  • Amateur execution
  • Text-heavy composition
  • Random placement
  • Overlapping elements
  • Inconsistent spacing
  • Obvious AI generation
  • Lack of refinement

What to Achieve

  • Museum quality
  • Magazine worthy
  • Art object status
  • Countless hours appearance
  • Top-of-field craftsmanship
  • Philosophical coherence
  • Visual sophistication
  • Systematic precision

Refinement Process

Initial Pass

Create based on philosophy and principles.

Second Pass (Critical)

  • Don't add more graphics
  • Refine what exists
  • Make extremely crisp
  • Respect minimalism philosophy
  • Increase cohesion with art
  • Make existing elements more artistic
  • Polish rather than expand

Final Verification

User already said: "It isn't perfect enough. Must be pristine, masterpiece of craftsmanship, as if about to be displayed in museum."

Apply this standard before delivery.

Output Format

Required files:

  1. Design philosophy (.md file)
  2. Visual expression (.pdf or .png)

Philosophy file contains:

  • Movement name
  • 4-6 paragraph philosophy
  • Visual principles
  • Execution guidance

Canvas file contains:

  • Visual interpretation
  • Minimal text
  • Systematic composition
  • Expert-level execution

Use Cases

Apply canvas design for:

  • Brand identity systems
  • Poster designs
  • Visual manifestos
  • Design system documentation
  • Art pieces and compositions
  • Conceptual visual frameworks
  • Editorial design
  • Exhibition materials
  • Coffee table books
  • Design philosophy demonstrations