Skip to content

chore: install ui-ux-pro-max skill, add HTML prototype, and GitHub Pages deployment#8

Merged
singyichen merged 5 commits into
mainfrom
chore/add-ui-ux-pro-max-skill
Mar 25, 2026
Merged

chore: install ui-ux-pro-max skill, add HTML prototype, and GitHub Pages deployment#8
singyichen merged 5 commits into
mainfrom
chore/add-ui-ux-pro-max-skill

Conversation

@singyichen
Copy link
Copy Markdown
Owner

Summary

  • Install ui-ux-pro-max design intelligence skill via uipro-cli (67 styles, 96 palettes, 57 font pairings)
  • Update .claude/SKILLS.md to document the new skill (total: 30 skills)
  • Add clickable HTML prototype under prototype/pages/ (login + dashboard with logout)
  • Add GitHub Actions workflow to auto-deploy prototype/ to GitHub Pages on push to main

Prototype Preview

After merge, the prototype will be live at:
https://singyichen.github.io/label-suite/

Pages:

  • prototype/index.html → auto-redirects to login
  • prototype/pages/login.html — SSO login (Google / GitHub buttons)
  • prototype/pages/dashboard.html — dashboard with logout modal

Test Plan

  • login.html opens in browser, both SSO buttons navigate to dashboard.html
  • dashboard.html Sign out button opens confirmation modal
  • Modal Cancel / Esc / backdrop click closes without logging out
  • Modal Sign out returns to login.html
  • Error state demo button shows role=alert banner
  • Mobile hamburger menu toggles correctly
  • Responsive at 375px, 768px, 1440px

🤖 Generated with Claude Code

singyichen and others added 2 commits March 25, 2026 11:21
Add UI/UX Pro Max design intelligence skill (67 styles, 96 palettes,
57 font pairings, 99 UX rules, 13 stacks) via uipro-cli. Update
SKILLS.md directory structure, quick reference, and phase guide.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add clickable HTML prototype (login + dashboard) under prototype/pages/
with index.html entry point. Add GitHub Actions workflow to auto-deploy
prototype/ to GitHub Pages on push to main.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@qodo-code-review
Copy link
Copy Markdown

Review Summary by Qodo

Add UI/UX Pro Max skill, design system generator, and interactive prototype with GitHub Pages deployment

✨ Enhancement 📝 Documentation

Grey Divider

Walkthroughs

Description
• Install UI/UX Pro Max design intelligence skill with 67 styles, 96 palettes, 57 font pairings
• Add comprehensive design system generator with BM25 search and Master + Overrides pattern
• Create interactive HTML prototype (login + dashboard) with accessibility and responsive design
• Deploy prototype to GitHub Pages via automated GitHub Actions workflow
Diagram
flowchart LR
  A["UI/UX Pro Max Skill"] --> B["Design System Generator"]
  B --> C["BM25 Search Engine"]
  B --> D["Master + Overrides Pattern"]
  E["HTML Prototype"] --> F["Login Page"]
  E --> G["Dashboard Page"]
  F --> H["GitHub Pages"]
  G --> H
  H --> I["Live at GitHub Pages URL"]
Loading

Grey Divider

File Changes

1. .claude/SKILLS.md 📝 Documentation +27/-5

Document UI/UX Pro Max skill and update skill count

.claude/SKILLS.md


2. .claude/skills/ui-ux-pro-max/SKILL.md 📝 Documentation +377/-0

Comprehensive UI/UX design intelligence skill documentation

.claude/skills/ui-ux-pro-max/SKILL.md


3. .claude/skills/ui-ux-pro-max/scripts/core.py ✨ Enhancement +253/-0

BM25 search engine for UI/UX style guides

.claude/skills/ui-ux-pro-max/scripts/core.py


View more (6)
4. .claude/skills/ui-ux-pro-max/scripts/design_system.py ✨ Enhancement +1067/-0

Design system generator with Master + Overrides pattern

.claude/skills/ui-ux-pro-max/scripts/design_system.py


5. .claude/skills/ui-ux-pro-max/scripts/search.py ✨ Enhancement +114/-0

CLI interface for design system search and generation

.claude/skills/ui-ux-pro-max/scripts/search.py


6. .github/workflows/deploy-prototype.yml ⚙️ Configuration changes +35/-0

GitHub Actions workflow for prototype deployment

.github/workflows/deploy-prototype.yml


7. prototype/index.html ✨ Enhancement +11/-0

Entry point redirecting to login page

prototype/index.html


8. prototype/pages/login.html ✨ Enhancement +124/-0

SSO login page with Google and GitHub buttons

prototype/pages/login.html


9. prototype/pages/dashboard.html ✨ Enhancement +313/-0

Dashboard with stats, tasks table, and sign-out modal

prototype/pages/dashboard.html


Grey Divider

Qodo Logo

@qodo-code-review
Copy link
Copy Markdown

qodo-code-review Bot commented Mar 25, 2026

Code Review by Qodo

🐞 Bugs (2) 📘 Rule violations (0) 📎 Requirement gaps (0) 📐 Spec deviations (0)

Grey Divider


Action required

1. Làm landing page non-English📘 Rule violation ⚙ Maintainability
Description
A Vietnamese example sentence was added to .claude/skills/ui-ux-pro-max/SKILL.md, introducing
non-English text outside the allowed README.zh-TW.md exception. This violates the repository-wide
requirement that project artifacts be written in English.
Code

.claude/skills/ui-ux-pro-max/SKILL.md[243]

+**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
Evidence
PR Compliance ID 1 forbids introducing non-English text in project artifacts other than
README.zh-TW.md. The line `**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên
nghiệp"` is Vietnamese and was added in this PR.

CLAUDE.md
.claude/skills/ui-ux-pro-max/SKILL.md[243-243]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Non-English (Vietnamese) text was introduced into a project artifact outside the allowed `README.zh-TW.md` exception.
## Issue Context
Compliance requires all documentation/comments/spec/source text to be in English, except `README.zh-TW.md`.
## Fix Focus Areas
- .claude/skills/ui-ux-pro-max/SKILL.md[243-243]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


2. Unsupported prompt domain 🐞 Bug ✓ Correctness
Description
The ui-ux-pro-max skill documentation advertises a prompt domain, but the CLI restricts --domain
to CSV_CONFIG keys that do not include prompt, so --domain prompt will fail argument
validation.
Code

.claude/skills/ui-ux-pro-max/SKILL.md[R9-10]

+## When to Apply
+
Evidence
search.py defines --domain choices as list(CSV_CONFIG.keys()), and core.py defines
CSV_CONFIG without a prompt key; therefore --domain prompt cannot be used despite being
documented.

.claude/skills/ui-ux-pro-max/scripts/search.py[56-70]
.claude/skills/ui-ux-pro-max/scripts/core.py[17-68]
.claude/skills/ui-ux-pro-max/SKILL.md[1-15]
.claude/skills/ui-ux-pro-max/SKILL.md[209-223]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`SKILL.md` documents a `prompt` domain, but `search.py --domain` only accepts keys present in `CSV_CONFIG` and `core.py` does not define `prompt`. This makes the documented CLI interface invalid.
## Issue Context
- `--domain` choices are bound to `CSV_CONFIG.keys()`.
- `prompt` is mentioned in the skill docs (domain list + table) but not implemented.
## Fix Focus Areas
- .claude/skills/ui-ux-pro-max/SKILL.md[1-15]
- .claude/skills/ui-ux-pro-max/SKILL.md[209-223]
- .claude/skills/ui-ux-pro-max/scripts/core.py[17-68]
- .claude/skills/ui-ux-pro-max/scripts/search.py[56-70]
### Suggested approaches
1) If `prompt` is not intended: remove `prompt` from the docs (domain list + table).
2) If intended: add a `prompt` entry in `CSV_CONFIG` (define file/search/output cols) and add the corresponding CSV under `.claude/skills/ui-ux-pro-max/data/`.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


3. Broken tasks.html link🐞 Bug ✓ Correctness
Description
The dashboard prototype links to tasks.html, but no such file exists under prototype/pages/,
causing 404 navigation failures in the deployed GitHub Pages prototype.
Code

prototype/pages/dashboard.html[R55-57]

+        <a href="#" class="px-3 py-2 text-sm text-primary font-medium bg-surface rounded-lg cursor-pointer" aria-current="page">Dashboard</a>
+        <a href="tasks.html" class="px-3 py-2 text-sm text-slate-600 hover:text-ink hover:bg-slate-50 rounded-lg cursor-pointer transition-colors duration-200">Tasks</a>
+        <a href="#" class="px-3 py-2 text-sm text-slate-600 hover:text-ink hover:bg-slate-50 rounded-lg cursor-pointer transition-colors duration-200">Leaderboard</a>
Evidence
dashboard.html contains multiple links to tasks.html, but the prototype directory only includes
index.html, pages/login.html, and pages/dashboard.html, so those links are broken.

prototype/pages/dashboard.html[54-99]
prototype/pages/dashboard.html[180-186]
prototype/index.html[1-11]
prototype/pages/login.html[1-124]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`prototype/pages/dashboard.html` links to `tasks.html` (desktop nav, mobile nav, and "View all"), but there is no `prototype/pages/tasks.html` in the repo. This will yield 404s on GitHub Pages.
## Issue Context
The PR deploys `prototype/` as the Pages artifact, so all links must resolve within that folder.
## Fix Focus Areas
- prototype/pages/dashboard.html[54-99]
- prototype/pages/dashboard.html[180-186]
### Suggested approaches
- Create `prototype/pages/tasks.html` (even a stub) to satisfy navigation.
- Or replace those links with `href="#"` (or remove the items) until the page exists.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools



Remediation recommended

4. Committed pyc artifacts 🐞 Bug ⚙ Maintainability
Description
The PR includes Python __pycache__/*.pyc bytecode files under the new skill scripts, which are
environment-specific and should not be committed (causing repo bloat and noisy diffs).
Code

.claude/skills/ui-ux-pro-max/scripts/core.py[1]

+#!/usr/bin/env python3
Evidence
The PR branch contains .claude/skills/ui-ux-pro-max/scripts/__pycache__/ with *.pyc files; there
is no root .gitignore to exclude them, so they are likely tracked and will vary by Python version
(cpython-314).

.claude/skills/ui-ux-pro-max/scripts/pycache/core.cpython-314.pyc[1-1]
.claude/skills/ui-ux-pro-max/scripts/pycache/design_system.cpython-314.pyc[1-1]
.claude/skills/ui-ux-pro-max/scripts/pycache/search.cpython-314.pyc[1-1]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Compiled Python bytecode (`__pycache__/` and `*.pyc`) is committed under `.claude/skills/ui-ux-pro-max/scripts/`. These files are machine/Python-version specific and should not live in git.
## Issue Context
The filenames include `cpython-314`, indicating they were generated locally and will differ for other Python versions.
## Fix Focus Areas
- .claude/skills/ui-ux-pro-max/scripts/__pycache__[1-999999]
### Suggested steps
1) Remove tracked bytecode from git (e.g., `git rm -r --cached .claude/skills/ui-ux-pro-max/scripts/__pycache__`).
2) Add a repo-level `.gitignore` (if missing) with at least:
- `__pycache__/`
- `*.pyc`
- `*.pyo`
3) Ensure CI/formatters don’t reintroduce these files.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


Grey Divider

ⓘ The new review experience is currently in Beta. Learn more

Grey Divider

Qodo Logo

- design-system/labelsuite/MASTER.md: persisted design system from
  ui-ux-pro-max (Flat Design, Indigo/Emerald palette, Crimson Pro +
  Atkinson Hyperlegible typography)
- specs/001-sso-login/spec.md: feature spec for Google/GitHub SSO login
  with logout support (4 user stories, 10 FRs, 6 SCs)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Comment thread .claude/skills/ui-ux-pro-max/SKILL.md Outdated
Comment thread .claude/skills/ui-ux-pro-max/SKILL.md
Comment thread prototype/pages/dashboard.html
singyichen and others added 2 commits March 25, 2026 13:25
- Replace Vietnamese example text with English in SKILL.md (English-first rule)
- Remove undocumented 'prompt' domain from SKILL.md domain table
- Replace broken tasks.html links with aria-disabled="#" in dashboard prototype

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Remove 'prompt' from search.py docstring and core.py style keywords
  since it is not a supported --domain value (closes qodo issue #2)
- Remove committed __pycache__/*.pyc files from git tracking
- Add .gitignore with Python, Node, env, and IDE exclusions (closes qodo issue #4)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@singyichen
Copy link
Copy Markdown
Owner Author

All qodo findings have been addressed:

  • Issue 2: Removed prompt from SKILL.md domain table, search.py docstring, and core.py style keywords. Net PR diff contains no prompt domain references.
  • Issue 4: Removed __pycache__/*.pyc via git rm --cached and added .gitignore to prevent recurrence.

@qodo-merge review

@singyichen singyichen merged commit 425d7a7 into main Mar 25, 2026
6 checks passed
@singyichen singyichen deleted the chore/add-ui-ux-pro-max-skill branch March 25, 2026 08:03
singyichen added a commit that referenced this pull request Apr 10, 2026
CLAUDE.md:
- Reduce SDD section from 62 lines to ~20 lines; remove pipeline table,
  status trigger list, and archive bash block (all now live in SKILL.md
  and specs/STATUS.md)
- Keep only hard behavioral constraints: pipeline one-liner, TDD MUST NOT
  rule, pre-PR analyze gate, module names, design paths, status/archive
  pointers

sdd-workflow SKILL.md:
- Add /superpowers:brainstorm as first pipeline step with gate condition
- Add STATUS.md update annotations at each pipeline stage
- Mark /speckit.analyze as REQUIRED gate (was "optional")
- Add archive step at pr-flow stage
- Update Spec Directory Structure to show STATUS.md and _archive/
- Add /superpowers:brainstorm to Spec-Kit Commands table
- Add new TDD Rule section with Red-Green-Refactor, applies-to scope,
  anti-rationalisation table, and restart instruction
- Expand SDD Rules from 5 to 8: add TDD rule (#3), analyze gate (#4),
  archive on merge (#8)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
singyichen added a commit that referenced this pull request Apr 14, 2026
* docs: add spec status index and archive convention

- Add specs/STATUS.md: single source of truth for all 16 feature pipeline
  statuses, with status legend, feature table, and archive log
- Add specs/_archive/ directory for completed specs post-merge
- Update CLAUDE.md: add Spec Status Index section with required update
  triggers, Spec Archive Convention with bash command, and two new rows
  in Workflow Quick Reference table

Addresses weak document indexing and unclear completion status in spec-kit.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs: strengthen SDD pipeline with brainstorm, TDD, and analyze gate

- CLAUDE.md: add full SDD pipeline table (8 stages with hard gates) at
  the top of the SDD section, replacing vague /sdd-workflow reference
- CLAUDE.md: add TDD Rule section with mandatory language ("MUST NOT
  write implementation before failing test") and explicit rejection of
  common rationalisations
- CLAUDE.md: update Workflow Quick Reference — new feature row now shows
  full stage sequence; add Pre-PR gate row requiring speckit.analyze
  zero findings before every PR
- speckit.implement.md: step 4 upgraded from suggestion to REQUIRED gate
  with anti-rationalisation list and restart instruction
- speckit.implement.md: add step 7 (mandatory /speckit.analyze gate,
  must pass before PR); step 8 updates STATUS.md on completion

Addresses three SDD gaps identified from OpenSpec and Superpowers articles:
missing brainstorm entry point, unforced TDD, and optional analyze gate.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs: slim CLAUDE.md SDD section and sync sdd-workflow SKILL.md

CLAUDE.md:
- Reduce SDD section from 62 lines to ~20 lines; remove pipeline table,
  status trigger list, and archive bash block (all now live in SKILL.md
  and specs/STATUS.md)
- Keep only hard behavioral constraints: pipeline one-liner, TDD MUST NOT
  rule, pre-PR analyze gate, module names, design paths, status/archive
  pointers

sdd-workflow SKILL.md:
- Add /superpowers:brainstorm as first pipeline step with gate condition
- Add STATUS.md update annotations at each pipeline stage
- Mark /speckit.analyze as REQUIRED gate (was "optional")
- Add archive step at pr-flow stage
- Update Spec Directory Structure to show STATUS.md and _archive/
- Add /superpowers:brainstorm to Spec-Kit Commands table
- Add new TDD Rule section with Red-Green-Refactor, applies-to scope,
  anti-rationalisation table, and restart instruction
- Expand SDD Rules from 5 to 8: add TDD rule (#3), analyze gate (#4),
  archive on merge (#8)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs: add 1→N iteration support to SDD workflow

- spec-template: add Version field, Spec Dependencies section (upstream/downstream), and Changelog section
- constitution: add iteration rule (update vs new spec), semantic versioning policy, and downstream impact requirement
- sdd-workflow SKILL: add Iteration Workflow (1→N) section and Cross-Spec Dependencies section

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs: add version, spec dependencies, and changelog to account specs 001-002

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: address PR #28 review findings

- specs/STATUS.md: clear stale branch and update notes for feature 012 (wireframe done via PR #27)
- speckit.implement: remove premature STATUS.md→done update; defer to pr-flow
- constitution.md: bump version to 1.3.0 and update Last Amended to 2026-04-13

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

* fix: address PR #28 review finding — fix agent-team ordering in workflow table

Move /agent-team before analyze gate in Workflow Quick Reference; it is an
implementation method, not a post-analyze step.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

* fix: address PR #28 review findings

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

* docs: rewrite AGENTS.md as standard agent rules file

Replace agent directory catalog with a concise rules-focused format.
Reduces token consumption by ~65% (211 → 80 lines) by removing
redundant tables and replacing them with boundary constraints,
hard rules, and required behaviors for autonomous agents.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: address PR #28 review findings — align SDD pipeline across docs

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant