[wip] feat(aif-design-issue): structured design phase skill for engineers and designers - #109
Open
natashaannn wants to merge 14 commits into
Open
[wip] feat(aif-design-issue): structured design phase skill for engineers and designers#109natashaannn wants to merge 14 commits into
natashaannn wants to merge 14 commits into
Conversation
…gineer design phase Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…le workflow - Remove audience split: both designers and engineers follow the same design phase - design-spec.md is now a committed artifact in the branch, not an alternative output - Tunnel step presents ngrok and localtunnel as user choice Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…tion - Rewrite description in third person - Add workflow checklist for progress tracking - Remove overview section (redundant with description) - Move design-spec and PR body templates to reference/ for progressive disclosure - Set localtunnel as default tunnel with ngrok as alternative - Trim over-explanation throughout Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
From evaluating 11 skills in transformteamsg/tfx-design-standard: - Add intent step (purpose, user/moment, surface type, done-criteria) - Add new-page vs. modification split with diverge phase for new pages - Add plan gate: explicit human approval before branch is created - Add L0 non-negotiables: contrast, keyboard, visible labels, destructive actions - Add layout checks: focal region, reading order, density, alignment - Add flow checks for multi-step interactions: escapability, async states, draft safety - Add copy checks during implementation (not as cleanup pass) - Add anti-slop checks: no nested cards, no identical-card grids, no purple gradients, no bounce easing, no AI writing tells - Add component manifest lookup in Step 2 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Map each AC scenario to an E2E test in the design plan and spec - Write E2E test per scenario alongside its implementation commit - Add Step 8: run full E2E suite, distinguish outdated tests from regressions - All tests must pass before PR is opened Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
PR body now includes a table mapping each acceptance criteria scenario to its E2E test file and pass/fail status from the Step 8 suite run. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ght detection - Add reference/design-standards-quickref.md: designer-editable companion to the TFX catalog YAML, organised by tier (L0/L1/L2) with one row per control and a deterministic-checks table mapping each scriptable control to its tool - Update Step 2 to detect whether axe-playwright is configured globally before generating E2E tests — surfaces a setup recommendation if not found, so accessibility runs on every UI change rather than only skill-generated tests - Step 2 now references the quickref when the project uses the TFX standard Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
natashaannn
changed the title
…configured Replace the technical recommendation with a plain-language notice and immediate installation — the skill now installs @axe-core/playwright and wires the global beforeEach rather than asking the user to set it up. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ecommendation Step 9 now evaluates each flagged scenario against criteria (new pattern, new flow, destructive action, modification) and writes a recommendation table into the PR body — "Strongly recommended" or "Can defer" with a reason. Running the actual session is delegated to aif-user-test. PR body template updated: "Validation" prose section replaced with a structured user testing recommendation table. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Mermaid flowchart shows the full cycle for both engineer-initiated and designer-initiated flows, including when user testing routes to a designer review vs an engineer review. References aif-user-test and the planned aif-apply-feedback skill. Includes a clear PR reviewer rule table. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
PR body template now uses a before/after table for modifications and inline screenshots for new pages. Step 10 instructs the skill to pick the format based on the surface type established in Step 3. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Extracts the five check categories from the inline Step 7 block into separate reference files for progressive disclosure: - checks-non-negotiables.md (always) - checks-layout.md (always) - checks-copy.md (always) - checks-anti-slop.md (always) - checks-flow.md (multi-step interactions only) Step 7 now lists links with load conditions rather than inlining the full check content, keeping SKILL.md within the 500-line budget. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… README Mermaid flowchart covers all 10 steps, the new page vs modification branch in Step 4, the human gate in Step 5, the per-scenario check and commit loop in Step 7, the failure triage in Step 8, and the draft PR output. Artifacts table lists design-spec.md, E2E tests, and draft PR with where each is created and where it lives. Reference files table maps each checks-*.md to its load condition. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…late PR body now includes a 10-step designer review plan: read design spec, open the app, walk each scenario, non-negotiables, layout, copy, anti-slop, flow (conditional), screenshots, user testing decision. Step 10 in SKILL.md updated to instruct the skill to expand the scenario checkboxes in checklist step 3 with one row per AC scenario. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #112
Closes #100
Related to #102
Summary
skills/aif-design-issue— a 10-step structured design skill usable by engineers and designers alike. Output is always adesign/<issue-slug>branch with a committeddesign-spec.mdand a draft PR as handoff.@axe-core/playwrightis configured globally — surfaces a setup recommendation if not, so accessibility runs on every UI change, not just skill-generated tests.reference/design-standards-quickref.md— a designer-editable companion to the TFX catalog YAML, organised by tier (L0/L1/L2) with a deterministic-checks table mapping each scriptable control to its tool.reference/design-spec-template.mdandreference/pr-body-template.mdfor progressive disclosure.Test plan
aif-design-issueon a real issue with acceptance criteria — confirm the workflow checklist renders, Step 3 (intent) fires before Step 4 (plan), and the human gate in Step 5 stops execution until approved (to be tested on feat(posts): track consent form responses and edit on behalf teacher-workspace-pg-frontend#35 by @natashaannn )@axe-core/playwrightis absent frompackage.jsonreference/design-standards-quickref.mdopens cleanly and all three tier sections (L0/L1/L2) are present🤖 Generated with Claude Code