office-web-ui-system
Office Web UI System
Overview
Use this skill to build or evolve internal web app UI with office-style structure, strong visual hierarchy, and reusable composition while keeping the result portable across frameworks and component libraries.
This skill is written as the source of truth in SKILL.md so it can be reused across AI tools that support skills, prompt packs, or custom instructions. Tool-specific metadata should stay in adapter files only and must not change the core workflow.
Prioritize two outcomes at the same time:
- deliver a clear, high-density, professional interface
- make important UI regions easy for humans and AI agents to identify by name
This skill is not only for shells and navigation. Use it when the user needs a polished:
- dashboard or report page
- CRUD/list page
- workspace/detail page
- form or wizard page
- stat card system
- filter/search/action region
More from thienanblog/awesome-ai-agent-skills
laravel-11-12-app-guidelines
Guidelines and workflow for working on Laravel 11 or Laravel 12 applications across common stacks (API-only or full-stack), including optional Docker Compose/Sail, Inertia + React, Livewire, Vue, Blade, Tailwind v4, Fortify, Wayfinder, PHPUnit, Pint, and Laravel Boost MCP tools. Use when implementing features, fixing bugs, or making UI/backend changes while following project-specific instructions (AGENTS.md, docs/).
735docker-local-dev
Generate Docker Compose and Dockerfile configurations for local development through interactive Q&A. Supports PHP/Laravel, WordPress, Drupal, Joomla, Node.js, and Python stacks with Nginx, Supervisor/PM2, databases, Redis, and email testing. Always asks clarifying questions before generating configurations.
54design-system-generator
Generate a project-specific DESIGN_SYSTEM.md that enforces consistent UI/UX across SPAs, traditional server-rendered sites, and hybrid systems. Includes tokens, component rules, accessibility gates, and production asset/manifest guidance.
34agents-md-generator
Generate or update CLAUDE.md/AGENTS.md files for AI coding agents through auto-scanning project files combined with interactive Q&A. Supports multiple tech stacks, development environments, and preserves customizations when updating.
32documentation-guidelines
Write or update backend feature documentation that follows a repo's DOCUMENTATION_GUIDELINES.md (or equivalent) across any project. Use when asked to create/update module docs, API contracts, or backend documentation that must include architecture, endpoints, payloads, Mermaid diagrams, and seeding instructions.
31ask-questions-if-underspecified
Clarify requirements before implementing. Do not use automatically, only when invoked explicitly.
28