design-skills

Build Docyrus dashboards, analytics pages, KPI/metric views, and reporting screens with a fixed, opinionated component stack — Bklit UI for ALL charts/data-viz, AwesomeCard for ALL dashboard cards/panels, and AwesomeStats for ALL stat/metric/KPI cards. Use when creating or refactoring a dashboard, analytics view, reporting page, KPI grid, metric strip, overview/home screen, or any data-visualization layout in a Docyrus-backed React app. Triggers on "dashboard", "analytics page", "stat cards", "KPI cards", "metric cards", "charts", "data visualization", "reporting screen", "overview page", AwesomeCard, AwesomeStats, bklit, or chart composition. This skill OVERRIDES the default "Recharts / shadcn chart" and generic-card guidance from docyrus-app-dev-react.

Catalog of every @docyrus/ui React (web) component and hook — descriptions, import paths, and per-component llms.txt documentation links. Use when picking a Docyrus UI component for a feature, discovering what @docyrus/ui ships, installing a component via the CLI, or before wiring any DataGrid / form / calendar / kanban / editor / panel / picker component so you can fetch its exact API from the docs. Triggers on "which Docyrus component", "is there a @docyrus/ui component for…", "add a Docyrus UI component", "list Docyrus components", or any @docyrus/ui component/hook lookup.

Build CRM-style Docyrus record detail pages — a single record (organization, contact, deal, account, ticket, project) shown as a two-pane layout with a resizable inline-editable attribute panel on the left and a tabbed work area on the right (Overview/KPIs, Activity, Emails, Calls, related-records tables, Comments, Tasks, Files). Composes `@docyrus/ui` components (`EditableRecordDetail`, `RecordActivityPanel`, `FileAttachmentPanel`, `CommentsPanel`, `AvatarThumbnail`, `EmailComposer`, `DataGrid`) inside a page shell. Use when asked to build or refactor a record detail/profile page, a 360° customer view, a CRM company/contact/deal page, an inspector with tabs, or any "open one record" page that needs inline attribute editing plus related-data tabs.

Build Docyrus React data-grid and record-list pages with `DataGrid`, `DataGridViewSelect`, `useDataGrid`, `useDocyrusDataViewSelect`, and `useDocyrusDataGrid`. Use when asked to build or refactor a list page, records table, CRM or ERP grid, saved-view tabs, row actions, manual DataGrid toolbar composition, or Docyrus data-source grid queries with filtering, sorting, grouping, search, display modes, paging, and reload behavior.

Build Docyrus React record forms, detail sheets, inspector panels, and inline-edit record UIs with `useDocyrusFormView`, `DynamicFormField`, `DynamicValue`, `EditableRecordDetail`, `EditableValue`, and value renderers. Use when asked to create or refactor create/edit/view pages, modal or sheet record forms, click-to-edit detail panels, metadata-driven field layouts, manual read-only record summaries, or field-type mapping logic that must choose correctly between form inputs, inline editors, and value-renderer fallbacks.