Instruction file imported from TruongPhuc2811/PoliticalEducationV0 (.cursor/rules/210-ui-ux-reference.mdc). Copyright stays with the author.

UI / UX Rule

Name: 210-ui-ux-reference
Author: TruongPhuc2811

Reference:

docs/00-input/ui-reference/ui-reference-01.png
wireframes/WIREFRAME-SPEC.md
docs/v0.2/SCREEN-CATALOG.md

Principles:

The image reference communicates visual direction; do not clone it 1:1.
User Portal: content-first, visual, large module entry points, responsive.
Admin Portal: operational, sidebar/table/form/dashboard oriented.
Home must expose all 9 main modules.
Desktop target: clear 3-column module grid where space allows.
Mobile target: 1–2 columns depending on width.
Keep content hierarchy readable over decorative backgrounds.
Avoid excessive gradients, shadows, animation, or ornamental detail.
Do not invent a final design token system before docs/v0.5/UI-GUIDELINE.md is approved.
For the UI-report milestone, mock interactions are allowed only when clearly isolated from production data behavior.

{ "ocm": "1", "id": "truongphuc2811-politicaleducationv0-210-ui-ux-reference-rule", "kind": "skill", "name": "210-ui-ux-reference", "description": "UI implementation and wireframe rules for the User Portal, Admin Portal, responsive behavior, and the provided UI visual reference.", "publisher": "TruongPhuc2811", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "github-cursor-rules" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "UI implementation and wireframe rules for the User Portal, Admin Portal, responsive behavior, and the provided UI visual reference." ], "primary": false, "metadata": { "source": { "provider": "github-cursor-rules", "repository": "https://github.com/TruongPhuc2811/PoliticalEducationV0", "path": ".cursor/rules/210-ui-ux-reference.mdc", "ref": "c54255affa8723852bbebf7ac07444b86422e22d", "url": "https://github.com/TruongPhuc2811/PoliticalEducationV0/blob/c54255affa8723852bbebf7ac07444b86422e22d/.cursor/rules/210-ui-ux-reference.mdc", "key": "TruongPhuc2811/PoliticalEducationV0/.cursor/rules/210-ui-ux-reference.mdc" }, "applies_to": "frontend/**/*.{ts,tsx,css},docs/v0.5/**/*.md,wireframes/**/*.{md,html}" }, "instructions": "# UI / UX Rule\n\nReference:\n- `docs/00-input/ui-reference/ui-reference-01.png`\n- `wireframes/WIREFRAME-SPEC.md`\n- `docs/v0.2/SCREEN-CATALOG.md`\n\nPrinciples:\n- The image reference communicates visual direction; do not clone it 1:1.\n- User Portal: content-first, visual, large module entry points, responsive.\n- Admin Portal: operational, sidebar/table/form/dashboard oriented.\n- Home must expose all 9 main modules.\n- Desktop target: clear 3-column module grid where space allows.\n- Mobile target: 1–2 columns depending on width.\n- Keep content hierarchy readable over decorative backgrounds.\n- Avoid e", "cost": { "context_tokens": 218 } }

210-ui-ux-reference

About

UI / UX Rule

Use it

Manifest

Reviews