design

Category: Tools & Productivity | Uploader: jaimevalasek | Downloads: 0 | Version: v1.0（Latest）

Cognitive Core Design System — a modular visual identity system for building dark/light themed dashboards, frontpages, admin panels, institutional sites, landing pages, and any web interface. Use this skill whenever asked to build, style, or design ANY web UI — dashboards, SaaS panels, landing pages, institutional websites, portfolio pages, command centers, admin tools, or frontpages. Triggers on phrases like "use the design skill", "cognitive core style", "apply the design system", "dark dashboard", "build a landing page", "create a frontpage", "mentes sinteticas layout", "build an admin panel", "create a website with our visual identity", or any request for a styled web interface. This skill routes to sub-modules — always read this file first, then load only the modules you need.

Changelog: Source: GitHub https://github.com/jaimevalasek/aioson

Directory Structure

Current level: tree/main/template/.aioson/skills/design-system/

📁 components/
- 📄 SKILL.md 12.6 KB
📁 dashboards/
- 📄 SKILL.md 7.5 KB
📁 foundations/
- 📄 SKILL.md 7.7 KB
📁 motion/
- 📄 SKILL.md 6.0 KB
📁 patterns/
- 📄 SKILL.md 15.0 KB
📄 cognitive-core-ui.skill 10.4 KB
📄 SKILL.md 4.6 KB

SKILL.md

---
name: design
description: Cognitive Core Design System — a modular visual identity system for building dark/light themed dashboards, frontpages, admin panels, institutional sites, landing pages, and any web interface. Use this skill whenever asked to build, style, or design ANY web UI — dashboards, SaaS panels, landing pages, institutional websites, portfolio pages, command centers, admin tools, or frontpages. Triggers on phrases like "use the design skill", "cognitive core style", "apply the design system", "dark dashboard", "build a landing page", "create a frontpage", "mentes sinteticas layout", "build an admin panel", "create a website with our visual identity", or any request for a styled web interface. This skill routes to sub-modules — always read this file first, then load only the modules you need.
---

# Cognitive Core Design System

A modular visual identity system. Agents read THIS file first, then load only the sub-modules needed for the task.

## Architecture

```
skills/design/
├── SKILL.md                 ← YOU ARE HERE (router)
├── foundations/
│   └── SKILL.md             ← Colors, typography, spacing, themes, CSS variables
├── components/
│   └── SKILL.md             ← Cards, tables, sidebars, forms, modals, stats, badges
├── patterns/
│   └── SKILL.md             ← Page-level layouts: dashboard, settings, auth, list-detail, frontpage
├── motion/
│   └── SKILL.md             ← Animations: entrances, hovers, loading, transitions
└── dashboards/
    └── SKILL.md             ← Dashboard presets: control center, analytics, ops cockpit
```

## How Agents Use This System

### Step 1: Read this file (you're doing it)

### Step 2: Classify the task

Determine what type of UI is being built:

| Task Type | Load These Modules |
|---|---|
| **Dashboard / Admin panel** | foundations → components → patterns → dashboards |
| **Landing page / Frontpage** | foundations → components → patterns → motion |
| **Institutional / Corporate site** | foundations → components → patterns → motion |
| **Settings / Config page** | foundations → components → patterns |
| **Auth page (login/register)** | foundations → components → patterns |
| **Single component** | foundations → components |
| **Quick styling fix** | foundations |
| **Animation work** | foundations → motion |

### Step 3: Read the required modules IN ORDER

Always start with `foundations/SKILL.md` — it has the CSS variables everything else depends on. Then read the others as needed.

### Step 4: Build

Compose the interface using tokens from foundations, building blocks from components, layouts from patterns, and animations from motion. For dashboards, the dashboards module has ready-to-use presets.

## Visual Identity Summary

The Cognitive Core aesthetic has three pillars:

1. **Command Center Authority** — Dense data, monospaced labels, large stat readouts, structured grids
2. **Premium Refinement** — Layered surfaces (3+ depth levels), subtle borders, teal/cyan accent as the "pulse"
3. **Structured Hierarchy** — Tabs, sidebars, card grids, section headers with icons, labeled zones

This applies to ALL output types — dashboards get the full treatment, but frontpages and institutional pages use the same typography, color system, and component vocabulary in a more open layout.

## Theme System

Every output supports dark/light toggle via `data-theme` attribute:

```html
<div data-theme="dark"> <!-- or "light" -->
```

Toggle the attribute value to switch themes. The mechanism (state, JS toggle, server-side) depends on your stack.

Default to **dark** for dashboards/admin. Default to **light** for frontpages/institutional. Always include a theme toggle.

## Technology Boundary

This skill controls **visual identity only** — colors, typography, spacing, layout structure, component anatomy, and motion behavior. It does NOT dictate:

- Output format (HTML, JSX, Vue, Blade, Svelte, etc.)
- Framework or library choice
- Build tooling or bundling
- File structure or splitting strategy

The agent building the interface decides all technology concerns. This skill provides the **what it should look like**, the agent decides the **how to build it**.

Code examples in sub-modules use inline style objects for clarity. Treat them as **design specifications**, not copy-paste code. Adapt the property names and syntax to whatever technology the agent is targeting.

## Required Assets (all technologies)

- **Fonts**: Google Fonts — JetBrains Mono + Inter (import via CSS `@import` or `<link>` tag)
- **Icons**: Any icon library. Emoji placeholders in examples are just for illustration.

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

design

Directory Structure

SKILL.md

Report

Notice