@prestyj/cli 5.5.0 → 5.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/end-notification.mp3 +0 -0
- package/assets/skills/evidence-led-ui/LICENSES.md +68 -0
- package/assets/skills/evidence-led-ui/SKILL.md +139 -0
- package/{LICENSE → assets/skills/evidence-led-ui/corpus/awesome-design-md/LICENSE} +1 -1
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/airbnb/DESIGN.md +545 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/airtable/DESIGN.md +554 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/apple/DESIGN.md +562 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/binance/DESIGN.md +634 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/bmw/DESIGN.md +544 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/bmw-m/DESIGN.md +503 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/bugatti/DESIGN.md +454 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/cal/DESIGN.md +542 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/claude/DESIGN.md +589 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/clay/DESIGN.md +541 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/clickhouse/DESIGN.md +544 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/cohere/DESIGN.md +451 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/coinbase/DESIGN.md +570 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/composio/DESIGN.md +506 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/cursor/DESIGN.md +537 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/dell-1996/DESIGN.md +632 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/elevenlabs/DESIGN.md +504 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/expo/DESIGN.md +526 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/ferrari/DESIGN.md +531 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/figma/DESIGN.md +578 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/framer/DESIGN.md +544 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/hashicorp/DESIGN.md +575 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/hp/DESIGN.md +670 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/ibm/DESIGN.md +550 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/intercom/DESIGN.md +546 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/kraken/DESIGN.md +125 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/lamborghini/DESIGN.md +288 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/linear.app/DESIGN.md +548 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/lovable/DESIGN.md +298 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/mastercard/DESIGN.md +365 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/meta/DESIGN.md +683 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/minimax/DESIGN.md +746 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/mintlify/DESIGN.md +852 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/miro/DESIGN.md +825 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/mistral.ai/DESIGN.md +773 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/mongodb/DESIGN.md +767 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/nike/DESIGN.md +575 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/nintendo-2001/DESIGN.md +649 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/notion/DESIGN.md +821 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/nvidia/DESIGN.md +640 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/ollama/DESIGN.md +539 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/opencode.ai/DESIGN.md +521 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/pinterest/DESIGN.md +597 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/playstation/DESIGN.md +661 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/posthog/DESIGN.md +690 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/raycast/DESIGN.md +669 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/renault/DESIGN.md +589 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/replicate/DESIGN.md +616 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/resend/DESIGN.md +585 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/revolut/DESIGN.md +636 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/runwayml/DESIGN.md +244 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/sanity/DESIGN.md +357 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/sentry/DESIGN.md +551 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/shopify/DESIGN.md +516 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/slack/DESIGN.md +482 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/spacex/DESIGN.md +363 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/spotify/DESIGN.md +246 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/starbucks/DESIGN.md +580 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/stripe/DESIGN.md +487 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/supabase/DESIGN.md +462 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/superhuman/DESIGN.md +448 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/tesla/DESIGN.md +286 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/theverge/DESIGN.md +339 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/together.ai/DESIGN.md +633 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/uber/DESIGN.md +636 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/vercel/DESIGN.md +736 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/vodafone/DESIGN.md +538 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/voltagent/DESIGN.md +521 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/warp/DESIGN.md +526 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/webflow/DESIGN.md +588 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/wired/DESIGN.md +497 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/wise/DESIGN.md +544 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/x.ai/DESIGN.md +465 -0
- package/assets/skills/evidence-led-ui/corpus/awesome-design-md/design-md/zapier/DESIGN.md +537 -0
- package/assets/skills/evidence-led-ui/data/corpus-manifest.json +768 -0
- package/assets/skills/evidence-led-ui/data/observations.json +47053 -0
- package/assets/skills/evidence-led-ui/references/anti-defaults.md +203 -0
- package/assets/skills/evidence-led-ui/references/archetypes.md +97 -0
- package/assets/skills/evidence-led-ui/references/craft-rulings.md +167 -0
- package/assets/skills/evidence-led-ui/references/methodology.md +72 -0
- package/assets/skills/evidence-led-ui/references/observed-patterns.md +68 -0
- package/assets/skills/evidence-led-ui/references/production-contract.md +120 -0
- package/assets/skills/evidence-led-ui/references/provenance.md +117 -0
- package/assets/skills/evidence-led-ui/references/quality-rubric.md +126 -0
- package/dist/app-sidecar.js +159 -43
- package/dist/app-sidecar.js.map +1 -1
- package/dist/chat-agents/general.test.js +3 -0
- package/dist/chat-agents/general.test.js.map +1 -1
- package/dist/chat-agents/jiwa.d.ts +53 -0
- package/dist/chat-agents/jiwa.d.ts.map +1 -0
- package/dist/chat-agents/jiwa.js +352 -0
- package/dist/chat-agents/jiwa.js.map +1 -0
- package/dist/chat-agents/jiwa.test.d.ts +2 -0
- package/dist/chat-agents/jiwa.test.d.ts.map +1 -0
- package/dist/chat-agents/jiwa.test.js +66 -0
- package/dist/chat-agents/jiwa.test.js.map +1 -0
- package/dist/chat-agents/shared.d.ts.map +1 -1
- package/dist/chat-agents/shared.js +5 -1
- package/dist/chat-agents/shared.js.map +1 -1
- package/dist/cli.d.ts.map +1 -1
- package/dist/cli.js +15 -0
- package/dist/cli.js.map +1 -1
- package/dist/core/agent-session-review-coverage.test.d.ts +2 -0
- package/dist/core/agent-session-review-coverage.test.d.ts.map +1 -0
- package/dist/core/agent-session-review-coverage.test.js +57 -0
- package/dist/core/agent-session-review-coverage.test.js.map +1 -0
- package/dist/core/agent-session.d.ts +13 -7
- package/dist/core/agent-session.d.ts.map +1 -1
- package/dist/core/agent-session.js +143 -38
- package/dist/core/agent-session.js.map +1 -1
- package/dist/core/compaction/compactor.test.js +1 -1
- package/dist/core/compaction/compactor.test.js.map +1 -1
- package/dist/core/event-bus.d.ts +2 -0
- package/dist/core/event-bus.d.ts.map +1 -1
- package/dist/core/event-bus.js.map +1 -1
- package/dist/core/goal-worker.test.js +3 -2
- package/dist/core/goal-worker.test.js.map +1 -1
- package/dist/core/ideal-review.d.ts +27 -0
- package/dist/core/ideal-review.d.ts.map +1 -1
- package/dist/core/ideal-review.js +64 -0
- package/dist/core/ideal-review.js.map +1 -1
- package/dist/core/ideal-review.test.js +34 -1
- package/dist/core/ideal-review.test.js.map +1 -1
- package/dist/core/loop-breaker.d.ts +23 -16
- package/dist/core/loop-breaker.d.ts.map +1 -1
- package/dist/core/loop-breaker.js +52 -11
- package/dist/core/loop-breaker.js.map +1 -1
- package/dist/core/loop-breaker.test.js +37 -16
- package/dist/core/loop-breaker.test.js.map +1 -1
- package/dist/core/lsp/client.d.ts +3 -0
- package/dist/core/lsp/client.d.ts.map +1 -1
- package/dist/core/lsp/client.js +20 -0
- package/dist/core/lsp/client.js.map +1 -1
- package/dist/core/lsp/manager.d.ts +32 -9
- package/dist/core/lsp/manager.d.ts.map +1 -1
- package/dist/core/lsp/manager.js +89 -37
- package/dist/core/lsp/manager.js.map +1 -1
- package/dist/core/lsp/manager.test.js +56 -4
- package/dist/core/lsp/manager.test.js.map +1 -1
- package/dist/core/nolan-prompt.d.ts +3 -3
- package/dist/core/nolan-prompt.d.ts.map +1 -1
- package/dist/core/nolan-prompt.js +10 -10
- package/dist/core/nolan-prompt.js.map +1 -1
- package/dist/core/nolan-prompt.test.js +17 -0
- package/dist/core/nolan-prompt.test.js.map +1 -1
- package/dist/core/run-lifecycle.d.ts +40 -0
- package/dist/core/run-lifecycle.d.ts.map +1 -0
- package/dist/core/run-lifecycle.js +95 -0
- package/dist/core/run-lifecycle.js.map +1 -0
- package/dist/core/run-lifecycle.test.d.ts +2 -0
- package/dist/core/run-lifecycle.test.d.ts.map +1 -0
- package/dist/core/run-lifecycle.test.js +64 -0
- package/dist/core/run-lifecycle.test.js.map +1 -0
- package/dist/core/session-manager.d.ts +25 -1
- package/dist/core/session-manager.d.ts.map +1 -1
- package/dist/core/session-manager.js +66 -1
- package/dist/core/session-manager.js.map +1 -1
- package/dist/core/session-manager.test.js +80 -2
- package/dist/core/session-manager.test.js.map +1 -1
- package/dist/core/skills-routing.test.d.ts +2 -0
- package/dist/core/skills-routing.test.d.ts.map +1 -0
- package/dist/core/skills-routing.test.js +70 -0
- package/dist/core/skills-routing.test.js.map +1 -0
- package/dist/core/skills.d.ts +2 -0
- package/dist/core/skills.d.ts.map +1 -1
- package/dist/core/skills.js +32 -9
- package/dist/core/skills.js.map +1 -1
- package/dist/core/subagent-manager.d.ts +40 -3
- package/dist/core/subagent-manager.d.ts.map +1 -1
- package/dist/core/subagent-manager.js +342 -30
- package/dist/core/subagent-manager.js.map +1 -1
- package/dist/core/subagent-manager.test.js +189 -3
- package/dist/core/subagent-manager.test.js.map +1 -1
- package/dist/core/subagent-store.d.ts +20 -0
- package/dist/core/subagent-store.d.ts.map +1 -0
- package/dist/core/subagent-store.js +177 -0
- package/dist/core/subagent-store.js.map +1 -0
- package/dist/core/subagent-store.test.d.ts +2 -0
- package/dist/core/subagent-store.test.d.ts.map +1 -0
- package/dist/core/subagent-store.test.js +94 -0
- package/dist/core/subagent-store.test.js.map +1 -0
- package/dist/modes/agent-home-mode.d.ts.map +1 -1
- package/dist/modes/agent-home-mode.js +10 -3
- package/dist/modes/agent-home-mode.js.map +1 -1
- package/dist/modes/serve-mode.d.ts.map +1 -1
- package/dist/modes/serve-mode.js +10 -3
- package/dist/modes/serve-mode.js.map +1 -1
- package/dist/modes/subagent-worker-mode.d.ts +2 -0
- package/dist/modes/subagent-worker-mode.d.ts.map +1 -1
- package/dist/modes/subagent-worker-mode.js +13 -3
- package/dist/modes/subagent-worker-mode.js.map +1 -1
- package/dist/system-prompt.js +2 -2
- package/dist/system-prompt.js.map +1 -1
- package/dist/system-prompt.test.js +7 -5
- package/dist/system-prompt.test.js.map +1 -1
- package/dist/tools/goals.d.ts +3 -3
- package/dist/tools/skill.d.ts.map +1 -1
- package/dist/tools/skill.js +8 -3
- package/dist/tools/skill.js.map +1 -1
- package/dist/tools/tasks.d.ts +2 -2
- package/dist/tools/web-fetch.d.ts +1 -1
- package/dist/ui/App.d.ts +7 -1
- package/dist/ui/App.d.ts.map +1 -1
- package/dist/ui/App.js +63 -17
- package/dist/ui/App.js.map +1 -1
- package/dist/ui/components/Footer.d.ts +1 -0
- package/dist/ui/components/Footer.d.ts.map +1 -1
- package/dist/ui/components/Footer.js +3 -3
- package/dist/ui/components/Footer.js.map +1 -1
- package/dist/ui/components/Footer.test.d.ts +2 -0
- package/dist/ui/components/Footer.test.d.ts.map +1 -0
- package/dist/ui/components/Footer.test.js +16 -0
- package/dist/ui/components/Footer.test.js.map +1 -0
- package/dist/ui/components/SkillsOverlay.d.ts.map +1 -1
- package/dist/ui/components/SkillsOverlay.js +8 -3
- package/dist/ui/components/SkillsOverlay.js.map +1 -1
- package/dist/ui/hooks/useAgentLoop.d.ts +8 -3
- package/dist/ui/hooks/useAgentLoop.d.ts.map +1 -1
- package/dist/ui/hooks/useAgentLoop.js +70 -25
- package/dist/ui/hooks/useAgentLoop.js.map +1 -1
- package/dist/ui/hooks/useAgentLoop.test.js +27 -0
- package/dist/ui/hooks/useAgentLoop.test.js.map +1 -1
- package/dist/ui/hooks/useSessionPersistence.d.ts +4 -2
- package/dist/ui/hooks/useSessionPersistence.d.ts.map +1 -1
- package/dist/ui/hooks/useSessionPersistence.js +7 -1
- package/dist/ui/hooks/useSessionPersistence.js.map +1 -1
- package/dist/ui/render.d.ts +7 -0
- package/dist/ui/render.d.ts.map +1 -1
- package/dist/ui/render.js +4 -0
- package/dist/ui/render.js.map +1 -1
- package/package.json +6 -5
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
# Production UI Contract
|
|
2
|
+
|
|
3
|
+
## Contents
|
|
4
|
+
|
|
5
|
+
1. Semantics and interaction architecture
|
|
6
|
+
2. Accessibility beyond contrast
|
|
7
|
+
3. Forms, errors, and user control
|
|
8
|
+
4. Responsive and international resilience
|
|
9
|
+
5. Performance and visual stability
|
|
10
|
+
6. Modern platform features and progressive enhancement
|
|
11
|
+
7. Tokens and component contracts
|
|
12
|
+
8. Trust, privacy, and high-consequence flows
|
|
13
|
+
9. Native mobile and adaptive windows
|
|
14
|
+
10. Conditional content types
|
|
15
|
+
11. Required release evidence
|
|
16
|
+
|
|
17
|
+
This is a binding, pass/fail quality floor for implemented web and native UI. Apply every relevant section. Mark a section not applicable only when the product surface genuinely does not contain that behavior. A visual-rubric score cannot compensate for a contract failure.
|
|
18
|
+
|
|
19
|
+
## 1. Semantics and interaction architecture
|
|
20
|
+
|
|
21
|
+
- Use native elements and platform controls before custom widgets. A navigation action is a link; an in-place action is a button. Preserve meaningful headings, landmarks, lists, tables, labels, and DOM reading order.
|
|
22
|
+
- Add ARIA only when native semantics are insufficient. Custom dialogs, menus, tabs, comboboxes, trees, grids, and similar composite widgets must follow the matching WAI-ARIA Authoring Practices pattern and keyboard model.
|
|
23
|
+
- Keep visual, DOM, focus, and screen-reader order aligned. CSS reordering must not create a different task sequence.
|
|
24
|
+
- Modal work uses the platform dialog primitive when suitable; non-modal top-layer content uses the Popover API when suitable. Manage initial focus, containment for modal UI, Escape/close behavior, background inertness, and focus return. A popover does not automatically supply menu or dialog semantics.
|
|
25
|
+
- Preserve browser and platform navigation. Meaningful destinations and shareable state need stable URLs or routes; Back, Forward, refresh, deep links, and native back behavior must not discard work or trap the user.
|
|
26
|
+
|
|
27
|
+
## 2. Accessibility beyond contrast
|
|
28
|
+
|
|
29
|
+
WCAG 2.2 Level AA is the web conformance floor. Project, platform, legal, or contractual requirements may be stricter.
|
|
30
|
+
|
|
31
|
+
- Keep a visible focus indicator and ensure sticky headers, footers, cookie bars, drawers, and overlays do not obscure the focused control.
|
|
32
|
+
- WCAG 2.2 Target Size (Minimum) is 24 by 24 CSS pixels with defined exceptions. Default touch-oriented web controls to a 44 by 44 CSS-pixel hit area where layout permits. Native work follows its platform target guidance, such as 44 by 44 points on Apple platforms and 48 by 48 density-independent pixels in Material guidance.
|
|
33
|
+
- Provide a single-pointer alternative for every non-essential drag interaction. Reordering also needs keyboard and assistive-technology operation.
|
|
34
|
+
- Do not require users to re-enter information already supplied in the same process when it can be selected or populated. Preserve data across validation errors and recoverable navigation.
|
|
35
|
+
- Authentication must work with password managers, copy/paste, and accessible alternatives. Do not make memory, transcription, puzzles, or blocked paste the only route unless an applicable exception is verified.
|
|
36
|
+
- Announce important asynchronous status and validation changes without moving focus unnecessarily. Do not rely on color, motion, position, or an icon alone to communicate meaning.
|
|
37
|
+
- Verify text resizing to 200%, reflow at 320 CSS pixels where WCAG applies, keyboard operation, reduced motion, and forced-colors/high-contrast behavior.
|
|
38
|
+
|
|
39
|
+
Automated accessibility tooling is a defect detector, not proof of conformance. Manual keyboard, focus, zoom/reflow, and assistive-technology checks remain required for relevant flows.
|
|
40
|
+
|
|
41
|
+
## 3. Forms, errors, and user control
|
|
42
|
+
|
|
43
|
+
- Every control has a persistent programmatic label. Associate help, units, requirements, and errors with the field; placeholder text is an example, never the only label.
|
|
44
|
+
- Use the correct input type, `autocomplete`, `inputmode`, and semantic grouping. Keep browser autofill, password-manager, paste, and native validation affordances working unless the product has a verified reason to replace them.
|
|
45
|
+
- Validate at a helpful time. Do not show errors before the user can reasonably act. On submit, summarize errors when the form is long, focus or link to the first problem, preserve values, and explain how to recover.
|
|
46
|
+
- Async actions expose pending, success, failure, retry, and duplicate-submission behavior. Do not silently lose work or replace the whole layout with a spinner.
|
|
47
|
+
- Match safeguards to consequence. Prefer undo for cheap reversible actions; use explicit confirmation for destructive, expensive, security-sensitive, or irreversible actions. State the object and consequence in concrete language.
|
|
48
|
+
|
|
49
|
+
## 4. Responsive and international resilience
|
|
50
|
+
|
|
51
|
+
- Use viewport queries for page composition and container queries for reusable components when the support policy permits. Use Grid, Flexbox, and `subgrid` to maintain key lines instead of JavaScript layout or breakpoint-specific duplication.
|
|
52
|
+
- Prefer logical properties and flow-relative alignment. Declare document language and direction, use locale-aware number/date/plural formatting, and avoid sentence construction by string concatenation.
|
|
53
|
+
- Test right-to-left layout when localization is relevant, long German-like expansion, short labels, CJK text, long unbroken values, dynamic type or 200% text, and missing media. Essential content must not depend on truncation.
|
|
54
|
+
- Account for safe areas, on-screen keyboards, dynamic viewport units, orientation, window resizing, no-hover input, coarse pointers, and split-screen or large-screen layouts where the platform can expose them.
|
|
55
|
+
- Avoid fixed heights for content-bearing regions. Preserve reading and action order when columns collapse or modules move.
|
|
56
|
+
|
|
57
|
+
## 5. Performance and visual stability
|
|
58
|
+
|
|
59
|
+
For web surfaces, use current Core Web Vitals as the shared target at the 75th percentile, segmented by mobile and desktop: LCP at or below 2.5 seconds, INP at or below 200 milliseconds, and CLS at or below 0.1. Use field data when available and project-appropriate lab checks to prevent regressions.
|
|
60
|
+
|
|
61
|
+
- Reserve media and embed dimensions. Provide responsive image sources and sizes; do not lazy-load the likely LCP image; lazy-load suitable below-the-fold media.
|
|
62
|
+
- Load only used font families, scripts, styles, and weights. Make the selected loading strategy explicit and test fallback layout shift.
|
|
63
|
+
- Keep initial JavaScript and hydration proportional to the interaction. Prefer CSS for layout and visual state; avoid main-thread work that delays input feedback.
|
|
64
|
+
- Skeletons match final geometry. Loading, font swaps, banners, validation, and async results must not unexpectedly move the current target.
|
|
65
|
+
- Animate named properties only. When movement is necessary, prefer compositor-friendly properties and avoid layout-thrashing animation, while still obeying the no-generic-hover-lift and reduced-motion rules.
|
|
66
|
+
- Record a measured result or an honest unverified status. A Lighthouse score alone is not field performance evidence.
|
|
67
|
+
|
|
68
|
+
## 6. Modern platform features and progressive enhancement
|
|
69
|
+
|
|
70
|
+
- Set a browser and device support policy from project evidence. Prefer features in the project's Baseline/support range; use feature detection and a simpler fallback for newer capabilities.
|
|
71
|
+
- Use native `dialog`, Popover, `inert`, constraint validation, and other platform primitives when their semantics match the job and the support policy allows them. Do not choose a new API merely because it is fashionable.
|
|
72
|
+
- Treat View Transitions and similar enhancements as optional continuity layers. Navigation and state changes must still work without them and under reduced motion.
|
|
73
|
+
- Preserve the essential task when scripts, media, fonts, animation, clipboard access, or a preferred input mode are unavailable whenever progressive enhancement is feasible for the product.
|
|
74
|
+
|
|
75
|
+
## 7. Tokens and component contracts
|
|
76
|
+
|
|
77
|
+
- Reuse the host system first. For a net-new scalable system, separate primitive values from semantic roles and component tokens; define modes without duplicating meaning.
|
|
78
|
+
- The Design Tokens Community Group 2025.10 format is a stable interoperability option, not a W3C Standard and not a mandatory migration target. Use it only when tools need a portable source of truth.
|
|
79
|
+
- Each shared component documents anatomy, semantic element, variants, sizes, content limits, states, keyboard behavior, responsive behavior, and accessibility name/description rules.
|
|
80
|
+
- Keep one source of truth. Generated platform outputs must not become competing hand-edited token stores.
|
|
81
|
+
|
|
82
|
+
## 8. Trust, privacy, and high-consequence flows
|
|
83
|
+
|
|
84
|
+
- Do not use deceptive hierarchy, disguised ads, preselected consent, confirm-shaming, forced continuity, hidden costs, or an easier opt-in than opt-out path.
|
|
85
|
+
- Show total cost, renewal terms, data use, permissions, and destructive consequences before commitment. Keep consent granular and revocable where the product requires it.
|
|
86
|
+
- Do not expose secrets or sensitive personal data in screenshots, examples, analytics labels, URLs, notifications, or error copy.
|
|
87
|
+
- High-consequence health, finance, safety, identity, and legal interfaces require domain review, conservative defaults, traceable calculations, and clear escalation or correction routes.
|
|
88
|
+
|
|
89
|
+
## 9. Native mobile and adaptive windows
|
|
90
|
+
|
|
91
|
+
- Follow current Apple Human Interface Guidelines or Material/Android guidance for the actual target instead of styling a web layout to resemble a phone.
|
|
92
|
+
- Respect system bars, safe areas, Dynamic Type or platform font scaling, platform navigation/back behavior, input methods, permissions, haptics, and reduced-motion/accessibility settings.
|
|
93
|
+
- Build adaptive layouts for compact, medium, expanded, resizable, split-screen, keyboard, pointer, and touch contexts that the target platform supports.
|
|
94
|
+
- Prefer platform components and conventions unless a custom control has a tested product need and complete accessibility behavior.
|
|
95
|
+
|
|
96
|
+
## 10. Conditional content types
|
|
97
|
+
|
|
98
|
+
- Data visualization provides a text summary or accessible data alternative, meaningful names, keyboard access where interactive, non-color encoding, readable labels, and truthful scales.
|
|
99
|
+
- Tables use actual table semantics when relationships are tabular. Dense grids need an explicit keyboard and virtualization accessibility strategy.
|
|
100
|
+
- Search, filtering, pagination, and master-detail layouts preserve useful query/selection state and orientation. On narrow screens, keep decision-critical detail and the primary action visible or one obvious action away; do not strand the initial state at a list when task completion requires its detail. Announce result changes appropriately and distinguish no results from errors and first-use emptiness.
|
|
101
|
+
- AI, chat, and agent surfaces distinguish user, model, tool, source, pending, completed, interrupted, and failed content. Streaming work provides stop/cancel and recovery, preserves useful partial output, and avoids announcing every token to assistive technology.
|
|
102
|
+
- Consequential AI actions expose scope and destination before execution, request confirmation or permission at the point of risk, show progress and outcome, support correction or undo where possible, and never imply certainty, provenance, or successful action without evidence.
|
|
103
|
+
- Media surfaces provide captions or transcripts when required, meaningful alternatives, keyboard-operable controls, no surprise audio, and motion/autoplay behavior that respects user preferences.
|
|
104
|
+
- If multiple themes are supported, use semantic tokens and native `color-scheme` behavior, prevent a wrong-theme flash where feasible, persist the user's explicit choice, and verify contrast, focus, media, and system-control rendering in every mode.
|
|
105
|
+
|
|
106
|
+
## Required release evidence
|
|
107
|
+
|
|
108
|
+
For every broad implementation, record:
|
|
109
|
+
|
|
110
|
+
1. representative desktop and narrow/mobile renders, plus native/adaptive sizes when applicable;
|
|
111
|
+
2. primary-flow keyboard completion, visible focus, focus return, and no obscured focus;
|
|
112
|
+
3. project accessibility-tool output plus manual semantics and status review;
|
|
113
|
+
4. 200% text, 320 CSS-pixel reflow where applicable, longest content, and one localization stress case;
|
|
114
|
+
5. reduced-motion and forced-colors/high-contrast results where supported;
|
|
115
|
+
6. loading, empty, error, retry, disabled, success, destructive, and offline/slow-network states that apply;
|
|
116
|
+
7. route, refresh, deep-link, Back/Forward or native-back behavior that applies;
|
|
117
|
+
8. measured performance evidence or an explicit unverified item with the exact missing measurement;
|
|
118
|
+
9. the project's supported browser, device, and input matrix.
|
|
119
|
+
|
|
120
|
+
A small component records only applicable evidence, but semantics, keyboard/focus, content extremes, and relevant states cannot be skipped. Report contract failures plainly and fix them before calling broad UI work complete.
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
# Provenance and Boundaries
|
|
2
|
+
|
|
3
|
+
## Contents
|
|
4
|
+
|
|
5
|
+
- Included corpus and nature of observations
|
|
6
|
+
- Refero boundary
|
|
7
|
+
- Accessibility standards
|
|
8
|
+
- UI craft research
|
|
9
|
+
- Production-practice research
|
|
10
|
+
- Design-process references
|
|
11
|
+
- Skill-architecture research
|
|
12
|
+
- Refresh policy
|
|
13
|
+
|
|
14
|
+
## Included corpus
|
|
15
|
+
|
|
16
|
+
- **Source:** [`VoltAgent/awesome-design-md`](https://github.com/VoltAgent/awesome-design-md)
|
|
17
|
+
- **Pinned commit:** [`664b3e78fd1a298ba11973822da988483256d4b4`](https://github.com/VoltAgent/awesome-design-md/tree/664b3e78fd1a298ba11973822da988483256d4b4)
|
|
18
|
+
- **Archive:** `https://codeload.github.com/VoltAgent/awesome-design-md/tar.gz/664b3e78fd1a298ba11973822da988483256d4b4`
|
|
19
|
+
- **Retrieved:** 2026-07-13
|
|
20
|
+
- **License:** MIT, copyright 2026 VoltAgent; retained at `corpus/awesome-design-md/LICENSE`
|
|
21
|
+
- **Included:** all 74 `design-md/*/DESIGN.md` files present in the pinned archive
|
|
22
|
+
- **Excluded:** upstream previews, screenshots, media, fonts, website assets, private requests, and non-`DESIGN.md` content
|
|
23
|
+
|
|
24
|
+
Every copied document has its own SHA-256, category, byte count, and parser status in `data/corpus-manifest.json`. The analyzer verifies hashes before producing observations.
|
|
25
|
+
|
|
26
|
+
The pinned archive contains 74 documents. This differs from both the initial planning estimate of 75 and the upstream README badge of 73 at that commit. The manifest records the discrepancy rather than silently modifying the corpus.
|
|
27
|
+
|
|
28
|
+
## Nature of the observations
|
|
29
|
+
|
|
30
|
+
The upstream files analyze public brand and product surfaces. They are not official design-system publications from the named brands and do not grant rights to brand names, trademarks, proprietary fonts, or media. This skill uses them as observational text evidence, not as authority to reproduce a brand.
|
|
31
|
+
|
|
32
|
+
The derived references are an original synthesis. Quantitative claims point to the pinned commit and deterministic extraction; judgment and runtime recommendations are stated separately.
|
|
33
|
+
|
|
34
|
+
## Refero boundary
|
|
35
|
+
|
|
36
|
+
[`styles.refero.design`](https://styles.refero.design/) advertises a DESIGN.md reference library and a Refero MCP. No Refero pages, files, API responses, screenshots, or metadata are copied into this skill.
|
|
37
|
+
|
|
38
|
+
As fetched on 2026-07-13, [`styles.refero.design/robots.txt`](https://styles.refero.design/robots.txt):
|
|
39
|
+
|
|
40
|
+
- disallows named AI agents—including GPTBot, ClaudeBot, anthropic-ai, and Google-Extended—from `/`;
|
|
41
|
+
- allows the general user agent but disallows `/api/`, `/admin/`, `/extract/`, and `/playground/`.
|
|
42
|
+
|
|
43
|
+
Therefore this skill must not bulk-scrape Refero, call undocumented Refero endpoints, or mirror its catalog. Refero may be used only through an authorized Refero MCP or a user-provided export the user is entitled to share. Live access is optional; the skill works without it.
|
|
44
|
+
|
|
45
|
+
## Accessibility standards
|
|
46
|
+
|
|
47
|
+
- **Conformance floor:** [Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/), W3C Recommendation dated 12 December 2024 in the current W3C publication fetched 2026-07-13.
|
|
48
|
+
- **Not the conformance target:** [W3C Accessibility Guidelines (WCAG) 3.0](https://www.w3.org/TR/wcag-3.0/) is a W3C Working Draft dated 3 March 2026. W3C says publication as a Working Draft does not imply endorsement and that it is inappropriate to cite as anything other than work in progress.
|
|
49
|
+
|
|
50
|
+
Project or jurisdictional requirements may exceed this floor. Use the current official standard and product-specific accessibility requirements at implementation time.
|
|
51
|
+
|
|
52
|
+
## UI craft research checked 14 July 2026
|
|
53
|
+
|
|
54
|
+
The binding rulings in `references/craft-rulings.md` use these current sources:
|
|
55
|
+
|
|
56
|
+
- [WCAG 2.2 SC 1.4.3, Contrast Minimum](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html): 4.5:1 normal text and 3:1 large text;
|
|
57
|
+
- [WCAG 2.2 SC 1.4.11, Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html): 3:1 for meaningful control/state/graphic cues;
|
|
58
|
+
- [WCAG 2.2 SC 2.3.3, Animation from Interactions](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html): unnecessary interaction motion can be disabled and user reduced-motion preferences should be supported;
|
|
59
|
+
- [WCAG 2.2 SC 3.2.3, Consistent Navigation](https://www.w3.org/WAI/WCAG22/Understanding/consistent-navigation.html) and [SC 3.2.4, Consistent Identification](https://www.w3.org/WAI/WCAG22/Understanding/consistent-identification.html): repeated navigation order and repeated function identity stay predictable;
|
|
60
|
+
- [Lucide accessibility guidance](https://lucide.dev/guide/advanced/accessibility): visible labels in most cases, consistent icon usage, contrast, keyboard feedback, accessible icon buttons, and 44 by 44 target wrappers;
|
|
61
|
+
- [Material Symbols guide](https://developers.google.com/fonts/docs/material_symbols): coherent variable fill, weight, grade, and optical-size axes, plus subset guidance;
|
|
62
|
+
- [Carbon motion](https://carbondesignsystem.com/elements/motion/overview/): productive versus expressive motion, named easing roles, and duration scaled to motion size;
|
|
63
|
+
- [Carbon 2x Grid](https://carbondesignsystem.com/elements/2x-grid/overview/): shared units, key lines, consistent padding, and breakpoint integrity;
|
|
64
|
+
- [Google Fonts CSS API](https://developers.google.com/fonts/docs/getting_started) and [web.dev font practices](https://web.dev/articles/font-best-practices): explicit families/weights, `font-display`, early discovery, preconnect for third-party origins, and layout-shift testing;
|
|
65
|
+
- [Google Fonts metadata](https://fonts.google.com/metadata/fonts), fetched 14 July 2026: current family availability and popularity ordering used for the inspiration list.
|
|
66
|
+
|
|
67
|
+
The motion recommendations were also checked against the pinned local corpus. Several observed systems use color, underline, border, surface, icon, or opacity feedback instead of generic scale/translate hover lift. These remain independent observations, not official brand guidance.
|
|
68
|
+
|
|
69
|
+
Refero content was not accessed for this update because no authorized Refero MCP or user-provided export was available. The existing Refero boundary remains unchanged.
|
|
70
|
+
|
|
71
|
+
## Production-practice research checked 14 July 2026
|
|
72
|
+
|
|
73
|
+
The pass/fail contract in `references/production-contract.md` was checked against current primary guidance:
|
|
74
|
+
|
|
75
|
+
- [What's New in WCAG 2.2](https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/) and the linked Understanding documents: focus not obscured, target size minimum, dragging alternatives, redundant entry, and accessible authentication;
|
|
76
|
+
- [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/) and its dialog, menu button, combobox, and keyboard-interface patterns: native semantics first and complete keyboard/focus behavior for custom composites;
|
|
77
|
+
- [WAI Forms Tutorial](https://www.w3.org/WAI/tutorials/forms/): labels, grouping, instructions, validation, notifications, and accessible custom controls;
|
|
78
|
+
- the [WHATWG HTML Standard for dialog](https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element) and [popover](https://html.spec.whatwg.org/multipage/popover.html), plus [MDN Popover API guidance](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API): modal versus non-modal top-layer behavior and the semantics authors must still provide;
|
|
79
|
+
- [web.dev Web Vitals](https://web.dev/articles/vitals): current LCP, INP, and CLS thresholds and 75th-percentile field measurement; [LCP optimization](https://web.dev/articles/optimize-lcp), [MDN lazy loading](https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Lazy_loading), and the existing font sources support the media/font performance rules;
|
|
80
|
+
- [web.dev Baseline](https://web.dev/baseline), [MDN container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries), [subgrid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid), [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values), and [forced colors](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors): support-policy-led progressive enhancement and resilient layout;
|
|
81
|
+
- [W3C Internationalization Quick Tips](https://www.w3.org/International/quicktips/): Unicode, language declaration, semantic content, and international layout/content preparation;
|
|
82
|
+
- [Design Tokens Format Module 2025.10](https://www.designtokens.org/TR/2025.10/format/): a stable DTCG Final Community Group Report and interoperability option that is explicitly not a W3C Standard;
|
|
83
|
+
- current [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/) and [Android adaptive-layout guidance](https://developer.android.com/develop/ui/compose/layouts/adaptive): platform controls, accessibility settings, safe areas, resizable/adaptive windows, and native conventions;
|
|
84
|
+
- [W3C Ethical Web Principles](https://www.w3.org/TR/ethical-web-principles/) and the [FTC dark-pattern report](https://www.ftc.gov/reports/bringing-dark-patterns-light): user control, privacy, non-deceptive consent, and avoidance of manipulative flows;
|
|
85
|
+
- [OWASP Authentication Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Authentication_Cheat_Sheet.html): current authentication and credential-flow constraints where a UI exposes those features;
|
|
86
|
+
- [OpenAI Apps SDK UX principles](https://developers.openai.com/apps-sdk/concepts/ux-principles) and the [Microsoft HAX Toolkit](https://www.microsoft.com/en-us/haxtoolkit/): focused conversational value, clear action boundaries, privacy, expectation-setting, recovery from AI failure, and human oversight for AI-facing surfaces.
|
|
87
|
+
|
|
88
|
+
These are implementation references, not claims that every listed browser API or platform convention applies to every project. The local support matrix, product requirements, and stricter jurisdictional obligations decide applicability.
|
|
89
|
+
|
|
90
|
+
## Design-process references consulted
|
|
91
|
+
|
|
92
|
+
The synthesis considered public patterns from:
|
|
93
|
+
|
|
94
|
+
- [Anthropic `frontend-design`](https://github.com/anthropics/skills/tree/main/skills/frontend-design): brief-first direction and deliberate visual choices;
|
|
95
|
+
- [Leonxlnx `taste-skill`](https://github.com/Leonxlnx/taste-skill): detection of recurring generic landing-page patterns;
|
|
96
|
+
- [NextLevelBuilder `ui-ux-pro-max-skill`](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill): broad heuristic/reference organization.
|
|
97
|
+
|
|
98
|
+
No source skill text is bundled or renamed. This skill rejects fixed palette/font/radius bans, perpetual-motion defaults, and landing-page rules applied to product UI. See `LICENSES.md` for attribution status.
|
|
99
|
+
|
|
100
|
+
## Skill-architecture research checked 14 July 2026
|
|
101
|
+
|
|
102
|
+
The package structure was checked against the [Agent Skills specification](https://agentskills.io/specification), [Anthropic skill-authoring best practices](https://platform.claude.com/docs/en/agents-and-tools/agent-skills/best-practices.md), [OpenAI Skills guidance](https://platform.openai.com/docs/guides/tools-skills), and [Agent Skills evaluation guidance](https://agentskills.io/skill-creation/evaluating-skills): loader-visible name/description metadata, a concise directly actionable `SKILL.md`, references one level from the root, focused on-demand documents, self-contained scripts, explicit validation, and evaluation-driven iteration. The installed EZ Coder loader reads `name` and `description`; the portable `license` and `compatibility` fields are retained for other Agent Skills clients and safely ignored by EZ Coder.
|
|
103
|
+
|
|
104
|
+
`SKILL.md` remains below the recommended 500-line limit. Reference files over 100 lines include a contents overview so an agent preview exposes the file's scope. Detailed corpus data stays out of runtime context unless a specific claim requires it. The existing external A/B artifacts are unscored and predate the current contracts, so they are benchmark inputs rather than evidence that the current skill improves quality.
|
|
105
|
+
|
|
106
|
+
## Refresh policy
|
|
107
|
+
|
|
108
|
+
A corpus refresh must be explicit:
|
|
109
|
+
|
|
110
|
+
1. choose and record a new upstream commit;
|
|
111
|
+
2. replace only the licensed `DESIGN.md` snapshot and upstream license;
|
|
112
|
+
3. regenerate every hash and parser status;
|
|
113
|
+
4. rerun analysis and inspect changed denominators/outliers;
|
|
114
|
+
5. update synthesis claims and examples;
|
|
115
|
+
6. rerun validation.
|
|
116
|
+
|
|
117
|
+
Do not fetch “latest” silently at runtime. Reproducibility is more important than invisible freshness.
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
# Rendered UI Quality Rubric
|
|
2
|
+
|
|
3
|
+
## Contents
|
|
4
|
+
|
|
5
|
+
- Scoring and independent production-contract gate
|
|
6
|
+
- Criteria 1–4: specificity, hierarchy, composition, consistency and flow
|
|
7
|
+
- Criteria 5–8: typography, material logic, state completeness, responsive behavior
|
|
8
|
+
- Criteria 9–12: accessibility, motion, content authenticity, visual distinctiveness
|
|
9
|
+
- Required critique loop
|
|
10
|
+
|
|
11
|
+
## Scoring
|
|
12
|
+
|
|
13
|
+
Capture the implemented UI at a representative desktop viewport and a narrow mobile viewport. Score each criterion **0, 1, or 2** from rendered evidence, not source-code intent.
|
|
14
|
+
|
|
15
|
+
- **0 — broken or absent:** blocks completion, contradicts the brief, or has no evidence.
|
|
16
|
+
- **1 — usable but generic/incomplete:** the core works, but hierarchy, states, or specificity remain weak.
|
|
17
|
+
- **2 — resolved:** clear, product-specific, responsive, and testable.
|
|
18
|
+
|
|
19
|
+
Maximum: **24 points**. Ship broad UI work only at **20/24 or higher**, with no zero in accessibility, consistency and flow, responsive behavior, state completeness, or content authenticity, and only after the applicable checks in `production-contract.md` pass. The contract is an independent release gate; rubric points cannot offset semantics, accessibility, performance, resilience, or trust failures. A small component may score only applicable criteria, but every applicable quality-floor criterion must score 2 and its contract checks must pass.
|
|
20
|
+
|
|
21
|
+
## 1. Brief specificity
|
|
22
|
+
|
|
23
|
+
- **0:** Audience, task, and single job are unclear.
|
|
24
|
+
- **1:** Screen addresses the requested domain but could serve a neighboring product unchanged.
|
|
25
|
+
- **2:** Hierarchy, controls, content, and signature visibly support the named audience and job.
|
|
26
|
+
|
|
27
|
+
**Test:** Cover the logo. State the product and task from the screenshot alone.
|
|
28
|
+
|
|
29
|
+
## 2. Information hierarchy
|
|
30
|
+
|
|
31
|
+
- **0:** Primary action or reading order is ambiguous.
|
|
32
|
+
- **1:** A primary path exists, but multiple elements compete at the same level.
|
|
33
|
+
- **2:** First glance, second glance, and action sequence are deliberate; subordinate content remains available without competing.
|
|
34
|
+
|
|
35
|
+
**Test:** At 50% zoom or with a blurred screenshot, identify the first three attention stops.
|
|
36
|
+
|
|
37
|
+
## 3. Composition
|
|
38
|
+
|
|
39
|
+
- **0:** Layout breaks, clips, ignores shared key lines, or relies on arbitrary modules.
|
|
40
|
+
- **1:** Grid is stable but generic, repetitive, or weakly related to content; some section edges or component geometry drift.
|
|
41
|
+
- **2:** Scale, key lines, alignment, whitespace, and asymmetry/symmetry express content relationships and remain deliberate across viewports.
|
|
42
|
+
|
|
43
|
+
**Test:** Draw vertical and horizontal guides through major regions. Shared edges, baselines, dividers, and repeated component anatomy should align unless an exception communicates real hierarchy.
|
|
44
|
+
|
|
45
|
+
## 4. Consistency and flow
|
|
46
|
+
|
|
47
|
+
- **0:** Repeated functions change labels, icons, placement, geometry, or behavior; sections/pages feel independently invented.
|
|
48
|
+
- **1:** Most patterns repeat, but spacing cadence, icon treatment, controls, actions, or section transitions contain visible inconsistencies.
|
|
49
|
+
- **2:** Existing primitives are reused; one icon family, spacing rhythm, component anatomy, navigation order, action placement, and surface logic carry through the full flow.
|
|
50
|
+
|
|
51
|
+
**Test:** Compare adjacent sections and pages side by side. Trace one repeated action through every occurrence, then inspect container edges, control heights, icon weight, spacing, borders, labels, and state behavior.
|
|
52
|
+
|
|
53
|
+
## 5. Typography
|
|
54
|
+
|
|
55
|
+
- **0:** Text is unreadable, clipped, visually generic by neglect, or lacks a usable hierarchy.
|
|
56
|
+
- **1:** Type is legible but role assignment, family choice, measure, leading, loading, fallback, or pairing is inconsistent.
|
|
57
|
+
- **2:** Display, body, utility, and code roles are intentional; the chosen family/pairing fits the product; line lengths, wrapping, localization, requested weights, fallback metrics, and loading behavior are resolved.
|
|
58
|
+
|
|
59
|
+
**Test:** Inspect the longest real heading and paragraph at desktop and mobile. Disable web fonts, throttle loading, and compare fallback layout shift. Confirm every loaded family/style/weight has a used role.
|
|
60
|
+
|
|
61
|
+
## 6. Material and surface logic
|
|
62
|
+
|
|
63
|
+
- **0:** Borders, shadows, blur, gradients, and radii conflict or obscure content.
|
|
64
|
+
- **1:** Treatments are consistent but decorative or over-applied.
|
|
65
|
+
- **2:** Every surface has a clear containment/elevation reason; radius vocabulary is constrained by component role; effects reinforce subject matter.
|
|
66
|
+
|
|
67
|
+
**Test:** Name why each elevation level exists. Remove any level without a distinct reason.
|
|
68
|
+
|
|
69
|
+
## 7. State completeness
|
|
70
|
+
|
|
71
|
+
- **0:** A critical loading, empty, error, focus, form, offline, or disabled state is missing, unusable, loses work, or changes abruptly without adequate feedback.
|
|
72
|
+
- **1:** Happy-path interaction works, but secondary states, feedback, timing, recovery, or layout continuity are generic or incomplete.
|
|
73
|
+
- **2:** Relevant loading, empty, error, validation, retry, offline, focus, hover/press, selected, expanded, pending, disabled, destructive, and success states are coherent, preserve work and layout, and provide purposeful feedback.
|
|
74
|
+
|
|
75
|
+
**Test:** Trigger each relevant state with realistic content length and failure wording. Confirm preservation, recovery, duplicate-submission behavior, status announcement, and that any transition improves continuity rather than decoration.
|
|
76
|
+
|
|
77
|
+
## 8. Responsive behavior
|
|
78
|
+
|
|
79
|
+
- **0:** Content clips, overlaps, becomes unreachable, breaks reading/focus order, or loses its primary action.
|
|
80
|
+
- **1:** Layout stacks but hierarchy, density, localization, navigation, or input behavior degrades.
|
|
81
|
+
- **2:** Mobile, intermediate, wide, and resizable layouts deliberately recompose; target sizes, ordering, sticky regions, safe areas, input modes, content priority, and localization remain sound.
|
|
82
|
+
|
|
83
|
+
**Test:** Inspect at 320px, a representative phone width, 768px, and a wide desktop width; zoom browser text to 200% where applicable; stress long text and one RTL/localization case; verify no-hover and coarse-pointer behavior.
|
|
84
|
+
|
|
85
|
+
## 9. Accessibility quality floor
|
|
86
|
+
|
|
87
|
+
- **0:** Keyboard path, focus, semantics, contrast, labels, icon meaning, status, drag-only operation, or target sizes block use.
|
|
88
|
+
- **1:** Basics exist but focus order/visibility, text/non-text contrast, motion, icon labels, status cues, composite-widget behavior, forced colors, or assistive naming has gaps.
|
|
89
|
+
- **2:** Native semantics or verified APG behavior, visible and unobscured focus, keyboard operation, meaningful labels/status, WCAG 2.2 target minimums with platform-appropriate touch targets, reduced motion, forced colors, text contrast of at least 4.5:1 (3:1 for large text), and meaningful non-text contrast of at least 3:1 are verified.
|
|
90
|
+
|
|
91
|
+
**Test:** Complete the primary task by keyboard; inspect accessible names and status; verify overlay focus and drag alternatives; measure text, icon, control, and focus contrast; run project accessibility tooling; test 200% text/reflow, `prefers-reduced-motion`, and forced colors; verify color is not the only cue.
|
|
92
|
+
|
|
93
|
+
## 10. Motion purpose
|
|
94
|
+
|
|
95
|
+
- **0:** Relevant interaction feedback is missing or abrupt, or motion distracts, loops, shifts layout, uses generic hover lift, relies on `transition: all`, or ignores reduced motion.
|
|
96
|
+
- **1:** Motion is restrained but timing, easing, property choice, or state coverage is inconsistent.
|
|
97
|
+
- **2:** Every relevant interaction has purposeful feedback; named properties and shared tokens communicate state or continuity; resting surfaces are calm; generic lift is absent; reduced motion preserves meaning.
|
|
98
|
+
|
|
99
|
+
**Test:** For every transition, finish “This feedback explains…” and identify the property, duration, easing token, and reduced-motion behavior. Remove movement without an answer.
|
|
100
|
+
|
|
101
|
+
## 11. Content authenticity
|
|
102
|
+
|
|
103
|
+
- **0:** Fabricated claims, metrics, testimonials, logos, ratings, or misleading product states appear as real.
|
|
104
|
+
- **1:** Content is plausible but generic, repetitive, visibly placeholder-like, or inconsistent with the product voice.
|
|
105
|
+
- **2:** Copy and data are real, supplied, or honestly labeled fixtures; labels, units, dates, errors, and punctuation follow one product voice; generated UI copy avoids em dashes unless explicitly allowed.
|
|
106
|
+
|
|
107
|
+
**Test:** Trace every factual claim and number to project content, user input, or an explicitly marked fixture. Search generated UI copy for em dashes and verify every retained one is required source text or explicitly requested.
|
|
108
|
+
|
|
109
|
+
## 12. Visual distinctiveness
|
|
110
|
+
|
|
111
|
+
- **0:** Screen is indistinguishable from a generic template, uses emoji or mixed icon styles, or could belong to an unrelated AI-generated product.
|
|
112
|
+
- **1:** Brand tokens are present, but typography, composition, icon language, and motifs remain transferable.
|
|
113
|
+
- **2:** One coherent icon family and intentional typography support a memorable signature that emerges from the subject, content, or interaction without compromising usability.
|
|
114
|
+
|
|
115
|
+
**Test:** Remove logo and accent color. Identify the remaining product-specific signature, type voice, and icon language.
|
|
116
|
+
|
|
117
|
+
## Required critique loop
|
|
118
|
+
|
|
119
|
+
1. Capture desktop and mobile screenshots.
|
|
120
|
+
2. Score every applicable criterion and record one line of evidence per score.
|
|
121
|
+
3. Run the applicable `production-contract.md` checks and record pass, fail, or a specific unverified item.
|
|
122
|
+
4. Identify the lowest-scoring criterion; ties resolve in this order: accessibility, consistency and flow, state completeness, responsive behavior, hierarchy, authenticity, then aesthetics.
|
|
123
|
+
5. Remove one unnecessary decorative idea.
|
|
124
|
+
6. Revise the weakest criterion and every contract failure.
|
|
125
|
+
7. Re-capture, re-score, and re-check affected contract evidence.
|
|
126
|
+
8. Report the final score and any unverified item honestly.
|