command-code 0.26.15 → 0.26.17

package/skills/design/references/redesign.md

@@ -0,0 +1,186 @@
+# Redesign: `/design redesign`
+
+Redesign makes the same product feel like a different visual product. The job, content, and core flows stay intact. The visual world changes.
+
+This is not polish. This is not relayout. This is not color work. Redesign replaces the surface language end to end.
+
+---
+
+## Discipline files
+
+This mode drives the full redesign. These files are reference material — consult them when each dimension comes up during the redesign, not as a separate pass:
+
+- [color.md](color.md) — for correct palette construction when choosing the new color system
+- [typeset.md](typeset.md) — for correct type hierarchy when building the new type voice
+- [layout.md](layout.md) — for correct spatial logic when choosing the new composition
+- [border.md](border.md) — for correct edge language when choosing the new radius and frame system
+- [shadow.md](shadow.md) — for correct depth decisions when setting or removing elevation
+- [motion.md](motion.md) — for correct timing and easing when defining the new motion personality
+- [button.md](button.md) — for correct control states when replacing the component language
+
+---
+
+## Pre-execution checklist
+
+Before proceeding, check for existing reports in the `.commandcode/design/` directory. Look for these files:
+
+- `checkup-report.md`
+- `review-report.md`
+- `smell-report.md`
+
+If any of these files exist, read the report content and use it as context for your analysis. Prioritize issues flagged in the reports and reference specific findings when making changes.
+
+If no reports are found, proceed with the task normally.
+
+---
+
+## Composition Reset
+
+I do not redesign by repainting the old layout.
+
+I identify the product's dominant work pattern and choose a new composition from that job: monitor, operate, compare, configure, learn, decide, or explore.
+
+The new direction must change the spatial premise. A dashboard can become a command center, a comparison wall, or a focused operator console. A landing page can become a proof trail, an editorial story, a product demo, or a decision surface. A settings page can become a guided configuration path or a dense control panel.
+
+The composition shift must be visible before color, type, or motion are noticed.
+
+---
+
+## Full-Surface Bar
+
+`/design redesign` must transform the surface as a system. It is not a hero-only makeover.
+
+At minimum, I change composition, color roles, type hierarchy, component language, buttons or controls, edges, depth, states, and responsive behavior where those parts exist.
+
+If the old design is still recognizable after swapping only colors and font sizes, the redesign failed.
+
+---
+
+## What Stays
+
+I preserve the user's goals, task logic, content priority, accessibility bar, performance expectations, and core flow.
+
+If the interface worked functionally before, it should still work after. Ideally it works with more clarity.
+
+---
+
+## What Changes
+
+Every visual system is open.
+
+Color gets a new mood and semantic vocabulary. Typography gets a new voice and hierarchy. Layout gets a new composition logic. Components get new shape, density, and affordance. Borders and radii get a new edge language. Shadows get a new depth model, or disappear. Motion gets a new personality. Imagery and iconography get a new treatment.
+
+Old tokens do not carry forward by accident. Anything reused is deliberately re-adopted.
+
+---
+
+## The Direction
+
+A redesign needs a creative direction before it needs values.
+
+I name the concept in plain language. I name mood words that are physical and specific. I name what the direction is not. I name references when they help, but I do not clone them.
+
+If the direction is vague, the redesign becomes a pile of new parts. I sharpen the direction before building.
+
+---
+
+## Distance From The Old Design
+
+The new version must be visibly different.
+
+If the old and new buttons, cards, headings, and surfaces can be swapped without anyone noticing, the redesign did not go far enough.
+
+Different does not mean louder. It does not mean thicker borders, harder offsets, saturated blocks, sticker shapes, or neubrutalist defaults. It means the new system has its own spine.
+
+I can make a redesign quieter, sharper, more editorial, more operational, more tactile, more luxurious, more utilitarian, more technical, more human, or more information-dense. Loud is only one lane.
+
+If my first instinct is high-contrast blocks, chunky cards, hard black borders, offset shadows, pill CTAs, or sticker-like accents, I stop and ask whether the current product actually asked for that physical language. If not, I choose another direction.
+
+When a previous redesign in the conversation used a blocky or neubrutalist lane, I do not repeat that lane by default. I change the physical language, not just the colors.
+
+---
+
+## Cohesion
+
+Redesign succeeds only when the whole surface belongs to one world.
+
+Hero, footer, empty state, error state, modal, dropdown, table, form, button, hover, focus, loading, and success all need the same visual DNA.
+
+One new font with old shadows is not a redesign. New color on old components is not a redesign. Half-redesigns feel worse than the original because they expose the seam.
+
+---
+
+## Possible Directions
+
+I choose directions based on the brief, not trend appetite.
+
+**Minimal Swiss**: strict grid, precise type, restrained color, low depth.
+
+**Editorial**: strong type contrast, slower pacing, rules, columns, image-led or prose-led rhythm.
+
+**Brutalist**: raw structure, hard edges, exposed grid, high contrast, little softness. Use only when the brief supports bluntness, institutional force, counterculture energy, or deliberate rawness.
+
+**Playful blocky**: saturated color, chunky shapes, hard offsets, bold rhythm. Use only when the product can credibly carry toy-like confidence, youth, games, creator tools, events, education, or expressive consumer energy.
+
+**Tactile**: material cues, warm surfaces, grounded depth, slower physical motion.
+
+**Maximal expressive**: layered composition, strong color, ambitious type, high art direction.
+
+**Monochrome typographic**: type carries almost everything, with tight discipline.
+
+**Dark utility**: dense, technical, fast, border-led, semantic color only where useful.
+
+I do not stack aesthetics just because they are available. I do not choose brutalist or playful blocky just because they make change obvious.
+
+---
+
+## System Rebuild
+
+I rebuild the visual systems together.
+
+Color and type set the voice. Layout sets the path. Borders, radius, and shadow set physicality. Buttons and inputs set interaction tone. Motion sets temperament. Imagery sets specificity.
+
+Each reference file can inform the rebuild, but none of them gets copied mechanically. Redesign is one authored system.
+
+---
+
+## States And Edges
+
+The new direction applies to real life.
+
+Empty, loading, error, success, disabled, hover, focus, active, selected, overflow, long content, no content, slow network, narrow viewport, and wide viewport all need the new language.
+
+A redesign that only covers the happy screenshot is unfinished.
+
+---
+
+## What I Refuse
+
+- Polishing and calling it redesign
+- Hero-only redesigns
+- Reusing old component language with new colors
+- Recoloring old components and calling it redesign
+- Trend-stacking
+- Copying a competitor's rebrand
+- Losing function for portfolio screenshots
+- Accessibility regression
+- Old shadows, old radii, or old motion sneaking in by inertia
+- Creating style guide, report, or extra documentation unless explicitly asked
+
+---
+
+## How I Know Redesign Worked
+
+- The redesign is visible across the whole surface, not only the first viewport
+- Old and new feel like different visual products
+- The core task still works
+- Every system speaks the same new language
+- The personality is legible in a few seconds
+- States and edge cases match the redesign
+- Accessibility and performance are not worse
+- The result feels authored, not trend-composed
+
+STRICT RULE — NEVER BREAK THIS
+Do not create report.md, any kind of report, summary, analysis file,
+or extra documentation. This applies every time this file is used.
+Generate no reports unless explicitly asked.

package/skills/design/references/refine.md

@@ -0,0 +1,193 @@
+# Refine
+
+Refine changes the character of an existing design without pretending it is a new brief. I choose the move that fits the diagnosis, not the move that sounds fun.
+
+Refinement is a designer's hand on the volume, density, clarity, resilience, and pleasure of a surface.
+
+---
+
+## Pre-execution checklist
+
+Before proceeding, check for existing reports in the `.commandcode/design/` directory. Look for these files:
+
+- `checkup-report.md`
+- `review-report.md`
+- `smell-report.md`
+
+If any of these files exist, read the report content and use it as context for your analysis. Prioritize issues flagged in the reports and reference specific findings when making changes.
+
+If no reports are found, proceed with the task normally.
+
+---
+
+---
+
+## Composition Pressure
+
+Refinement starts by checking whether the composition matches the work pattern.
+
+Monitor should become clearer about priority and change.
+
+Operate should bring tools, targets, and feedback closer together.
+
+Compare should strengthen alignment, sorting, filtering, and scan rhythm.
+
+Configure should clarify groups, dependencies, preview, and commit.
+
+Learn should improve pacing, measure, and progression.
+
+Decide should remove distraction around proof and action.
+
+Explore should make paths, filters, and backtracking easier.
+
+I refine toward the job. I do not polish the wrong composition.
+
+---
+
+## Transformation Bar
+
+`/design refine` must visibly change the surface in the chosen direction.
+
+At minimum, I name the move, apply it to the relevant parts of the surface, and verify that the rendered result changed in character, clarity, resilience, or delight.
+
+One small detail, one hover effect, or one copy edit does not count as refinement unless the user explicitly asked for that exact detail.
+
+---
+
+## How I Choose The Move
+
+If the design is safe and flat, I **push** it — stronger commitment, sharper point of view.
+
+If the design is loud and exhausting, I **settle** it — less competition, more control.
+
+If the design is cluttered, I **strip** it — remove what does not serve the primary job.
+
+If the design breaks under real data, I **proof** it — test the edges, fill the gaps.
+
+If first-time users cannot reach value, I **activate** them — shorter path, useful defaults.
+
+If the design works but has no joy, I add **texture** — moments that feel memorable.
+
+If the surface should feel technically extraordinary, I **push past limits** — cinematic or invisible speed.
+
+I do not combine opposing moves unless the surface has separate zones that need separate treatment.
+
+---
+
+## Push
+
+Bolder means more committed, not more effects.
+
+For brand, I increase distinctiveness: stronger type, unexpected color, sharper composition, a hero moment with a point of view, and a lane that is not the median generated page.
+
+For product, I increase clarity: stronger hierarchy, clearer primary action, better density, tighter inactive states, more useful contrast. Product boldness usually looks like confidence, not spectacle.
+
+I refuse purple gradients, glass panels, neon on dark, gradient text, and bounce as the answer to "make it stronger."
+
+I know it worked when the focal point jumps out and the surface still feels coherent.
+
+---
+
+## Settle
+
+Quieter means reducing intensity without erasing character.
+
+I lower saturation where the eye has no rest. I reduce competing focal points. I flatten unnecessary depth. I remove motion that does not explain state. I let typography and spacing carry more of the hierarchy.
+
+Quiet does not mean gray. It means controlled.
+
+I know it worked when one thing leads, everything else supports, and the brand voice is still present.
+
+---
+
+## Strip
+
+Stripping means removing obstacles, not gutting capability.
+
+I find the primary job of the surface. Then I remove, combine, hide, or demote everything that does not help that job happen.
+
+Redundant copy goes. Repeated actions merge. Decorative containers flatten. Secondary controls move behind disclosure when they are not needed yet. The palette shrinks. The type system loses unnecessary steps.
+
+If cutting something changes the product's promise, I stop and ask.
+
+I know it worked when the path is faster and the remaining elements feel inevitable.
+
+---
+
+## Proof
+
+Proofing means the interface survives reality.
+
+I test long names, empty content, huge lists, extreme numbers, slow networks, offline states, permissions, rate limits, validation failures, concurrent actions, RTL, CJK, accents, emoji, and translated strings.
+
+I expect German to expand. I expect a user to click twice. I expect the API to fail. I expect a tiny screen and a huge one. I expect data to be missing.
+
+I know it worked when ugly data no longer creates ugly UI.
+
+---
+
+## Activate
+
+Activation is not a tour. It is the shortest path to first value.
+
+I identify the aha moment and design toward it. I teach by letting the user do real work. I use empty states, defaults, templates, sample data, and contextual help before I reach for a ceremony.
+
+Skip is real. Power users should not be trapped in training.
+
+I know it worked when users can reach value quickly and still find their way after skipping.
+
+---
+
+## Texture
+
+Texture earns a place at moments, not everywhere.
+
+Completion, first-use, milestones, meaningful waiting, useful recovery, tactile interaction, or a small discovery can carry texture. Routine work does not need celebration on every click.
+
+Brand can distribute texture across the page. Product should concentrate it at moments where emotion is already present.
+
+I know it worked when the moment feels memorable without slowing the task.
+
+---
+
+## Push Past Limits
+
+Pushing past limits means technical ambition in service of the interface.
+
+For a brand surface, it might be a scroll scene, shader, cinematic transition, generative visual, or advanced type treatment. For a product surface, it might be instant search over huge data, a dialog that morphs from its trigger, a table that stays smooth under massive load, or validation that feels immediate.
+
+Before building at this level, I name the ambition and the risk. Some surfaces need spectacle. Some need invisible speed.
+
+I know it worked when removing the effect would make the experience feel meaningfully worse.
+
+---
+
+## What I Refuse
+
+- Push as more generic effects and more noise
+- Calling small detail polish a character change
+- Claiming a change that is not visible in the rendered result
+- Settle as making everything gray
+- Strip as removing necessary capability
+- Proof as theory with no real edge data
+- Activate as a forced feature tour
+- Texture on critical errors or destructive moments
+- Pushing past limits in ways that hurt performance, accessibility, or context
+- Markdown refinement reports
+
+---
+
+## How I Know Refinement Is Done
+
+- The chosen move matches the diagnosis
+- The rendered result visibly changed in the chosen direction
+- The design has changed in character, not just detail
+- The primary task is clearer than before
+- The register still fits brand or product
+- Edge states are not worse
+- The result does not need another opposite refine pass to recover
+
+STRICT RULE — NEVER BREAK THIS
+Do not create report.md, any kind of report, summary, analysis file,
+or extra documentation. This applies every time this file is used.
+Generate no reports unless explicitly asked.

package/skills/design/references/relayout.md

@@ -0,0 +1,197 @@
+# Relayout: `/design relayout`
+
+Relayout moves the pieces without changing the identity. The content is mostly right. The arrangement is wrong.
+
+I reposition images, text, controls, and sections so the page has a clearer focal point, rhythm, and reading path.
+
+Relayout is not a nudge. If the result looks like the same screenshot with slightly different spacing, I failed.
+
+---
+
+## Pre-execution checklist
+
+Before proceeding, check for existing reports in the `.commandcode/design/` directory. Look for these files:
+
+- `checkup-report.md`
+- `review-report.md`
+- `smell-report.md`
+
+If any of these files exist, read the report content and use it as context for your analysis. Prioritize issues flagged in the reports and reference specific findings when making changes.
+
+If no reports are found, proceed with the task normally.
+
+---
+
+---
+
+## Composition Diagnosis
+
+I first ask which work pattern the current layout is trying to serve.
+
+If the surface monitors, I expose change, urgency, recency, and status.
+
+If it operates, I pull tools, targets, and feedback into one working field.
+
+If it compares, I protect alignment and make scanning cheaper.
+
+If it configures, I group choices by consequence and keep commit visible.
+
+If it teaches, I create a reading path with progressive reveal.
+
+If it persuades, I reduce the field to claim, proof, risk, and action.
+
+If it explores, I make filters, search, and backtracking obvious.
+
+The new composition must answer that pattern. Rearranged sameness is not relayout.
+
+---
+
+## What I Will Change
+
+I move things on the canvas.
+
+- Image position and scale
+- Text-image relationships
+- Section order
+- Visual weight
+- Grouping and spacing
+- Alignment system
+- Grid structure
+- Reading path
+- Responsive composition
+
+I do not change color strategy, font voice, visual identity, or feature scope unless the layout problem exposes a conflict that needs another mode.
+
+---
+
+## Structural Change Bar
+
+A relayout must include at least one visible structural change:
+
+- A new dominant focal point
+- A changed hero or section composition
+- A reordered section sequence
+- A different relationship between text and proof object
+- A changed navigation, sidebar, toolbar, or action placement
+- A transformed grid, table, split view, stack, or flow
+- A responsive order that changes the user's path
+
+Spacing, padding, alignment, width, gap, and margin changes can support relayout. They cannot be the whole relayout.
+
+If I cannot justify a structural change, the command should be `finish`, not `relayout`.
+
+---
+
+## Required companion references
+
+The skill automatically reads these three references in order. No user selection or permission needed—the system loads them silently to contextualize and inform better relayout decisions.
+
+| **[layout.md](layout.md)** | Establish the new spatial system, grid, and composition |
+| **[color.md](color.md)** | Build the new palette, neutrals, semantic roles, and accent strategy |
+| **[typeset.md](typeset.md)** | Pick new fonts, define new scale, set new pairing and hierarchy |
+
+---
+
+## The Core Judgment
+
+The eye needs somewhere to land.
+
+I decide the focal point before I move anything. Then I make secondary material support it and tertiary material stay out of the way.
+
+If everything is equally important, the layout has no opinion.
+
+---
+
+## Image And Text
+
+Images carry different jobs.
+
+A hero image can be the message. A feature image can explain a claim. A background image can set atmosphere. An inline image can support reading. A decorative image can be removed.
+
+Text can sit beside an image, over it, under it, wrapped around it, or alternate across sections. I choose the relationship based on the content, not the template.
+
+When text and image fight, I decide which one leads.
+
+---
+
+## Composition Lanes
+
+I pick one lane per section.
+
+**Symmetric** for calm authority and singular focus.
+
+**Asymmetric** for energy, tension, and art direction.
+
+**Strict grid** for rigor, technical confidence, and dense systems.
+
+**Editorial flow** for long-form, story, and cultural pacing.
+
+**Modular grid** for comparison, galleries, dashboards, and catalogs.
+
+**Broken grid** when one or two items deserve clear dominance.
+
+Mixing lanes inside one section usually creates noise. Sequencing different lanes across sections can create rhythm.
+
+---
+
+## Section Order
+
+I order sections by user need, not by source order.
+
+The strongest hook comes early. Context comes before complex proof. Trust appears before the ask when the ask needs confidence. CTAs appear at decision points. The ending answers what now.
+
+Mobile order is part of the design. A desktop composition that collapses into nonsense has not been relaid out.
+
+---
+
+## Spatial Rhythm
+
+I use spacing to show relationship.
+
+Tight gaps mean the pieces belong together. Wide gaps mean a new thought. Repeated gaps create rhythm. One gap everywhere creates monotony.
+
+Command Code's 1-4-9 rhythm stays useful here: micro, component, and section breaths.
+
+---
+
+## Balance
+
+I balance visual weight, not just geometry.
+
+Large images, dark blocks, saturated color, bold headlines, dense text, and isolated controls all carry mass. White space carries counterforce. The visual center often sits slightly above the mathematical center.
+
+Diagonal balance can create energy. Random imbalance just feels off.
+
+---
+
+## What I Refuse
+
+- Duplicated "relayout process" instructions
+- Treating relayout as redesign
+- Calling spacing polish a relayout
+- Leaving the same hero/proof composition intact when that composition is the problem
+- Moving sections without deciding priority
+- Alternating image/text blocks by reflex
+- Full-bleed imagery when the image is weak
+- Centering everything because it feels safe
+- Adding cards because spacing feels unresolved
+- Markdown reports or rationale files
+
+---
+
+## How I Know Relayout Worked
+
+- The before and after read differently as thumbnails
+- At least one structural change is visible without reading the code
+- One focal point leads each section
+- The eye path matches the content priority
+- Images and text support rather than compete
+- Section sequence feels like a journey
+- Spacing shows relationships
+- Desktop and mobile tell the same story
+- The composition still reads as a thumbnail
+
+STRICT RULE — NEVER BREAK THIS
+Do not create report.md, any kind of report, summary, analysis file,
+or extra documentation. This applies every time this file is used.
+Generate no reports unless explicitly asked.

package/skills/design/references/report-html.md

@@ -0,0 +1,116 @@
+# [PROJECT NAME] — [MODE] Report
+
+<!-- MODEL-ONLY BOUNDARY:
+This file is a report template only for smell, checkup, and review.
+Do not use this layout, dark report aesthetic, inline HTML, score block,
+corner boxes, or section structure as inspiration for product UI,
+landing pages, dashboards, app screens, components, or generated interfaces.
+Use it only when creating the required report artifact.
+Do not copy this comment into generated output.
+-->
+
+**Generated with CommandCode** • `YYYY-MM-DD`
+---
+
+<div style="background:#111; border:1px solid #222; padding:2.5rem; border-radius:0; position:relative; margin:2rem 0;">
+
+<div style="position:absolute; top:-1px; left:-1px; width:20px; height:20px; border:1px solid #222; background:#000;"></div>
+<div style="position:absolute; top:-1px; right:-1px; width:20px; height:20px; border:1px solid #222; background:#000;"></div>
+<div style="position:absolute; bottom:-1px; left:-1px; width:20px; height:20px; border:1px solid #222; background:#000;"></div>
+<div style="position:absolute; bottom:-1px; right:-1px; width:20px; height:20px; border:1px solid #222; background:#000;"></div>
+
+### // [MODE]
+
+# [PROJECT NAME]
+
+<div style="float:right; text-align:right; margin-top:-80px;">
+**<span style="font-size:3.5rem">[SCORE]</span><span style="font-size:1.8rem; color:#666">/[MAX_SCORE]</span>**  
+<span style="color:#[COLOR]">[VERDICT]</span>
+</div>
+
+<br clear="all">
+
+---
+
+### // TL;DR
+
+**> [TLDR DESCRIPTION]**
+
+<span style="color:#fbbf24">[RECOMMENDATION]</span>
+
+---
+
+### // [MODE-SPECIFIC TITLE]
+
+**[MODE-SPECIFIC CONTENT]**
+
+---
+
+### // HEURISTIC SCORES
+
+| #  | Heuristic                              | Score | Key Finding                          |
+|----|----------------------------------------|-------|--------------------------------------|
+| 1  | [Heuristic 1]                          | X/4   | [Finding]                            |
+| 2  | [Heuristic 2]                          | X/4   | [Finding]                            |
+| 3  | [Heuristic 3]                          | X/4   | [Finding]                            |
+| 4  | [Heuristic 4]                          | X/4   | [Finding]                            |
+| 5  | [Heuristic 5]                          | X/4   | [Finding]                            |
+| 6  | [Heuristic 6]                          | X/4   | [Finding]                            |
+| 7  | [Heuristic 7]                          | X/4   | [Finding]                            |
+| 8  | [Heuristic 8]                          | X/4   | [Finding]                            |
+| 9  | [Heuristic 9]                          | X/4   | [Finding]                            |
+|10  | [Heuristic 10]                         | X/4   | [Finding]                            |
+
+---
+
+### // COGNITIVE LOAD AUDIT
+
+**X / 8** — *[LOAD LEVEL]* ⚠️
+
+- ✅ [Positive point]
+- ❌ [Issue 1]
+- ❌ [Issue 2]
+
+**Recommended Next Modes**  
+`/[mode1]` `/[mode2]` `/[mode3]`
+
+---
+
+### // WHAT'S WORKING
+
+**[Item 1 Title]**  
+[Description]
+
+**[Item 2 Title]**  
+[Description]
+
+**[Item 3 Title]**  
+[Description]
+
+---
+
+### // PRIORITY ISSUES
+
+**P0 — CRITICAL**  
+**[Issue Title]**  
+[Issue description]
+
+> **FIX:** [Fix suggestion]
+
+**P1 — HIGH**  
+**[Issue Title]**  
+[Issue description]
+
+> **FIX:** [Fix suggestion]
+
+**P2 — MEDIUM**  
+**[Issue Title]**  
+[Issue description]
+
+> **FIX:** [Fix suggestion]
+
+</div>
+
+---
+
+*Generated with CommandCode • YYYY-MM-DD*