aidimension UI built-in skill

aidimension UI Templates

8 page templates + 18 AI app templates. Drop one in, wire to your LLM.

.skills/aidimension-template.md1700 charstemplatesapps
.skills/aidimension-template.md
GitHub
# aidimension UI — Templates & Sections

aidimension UI ships two kinds of pre-built layouts:

- **Templates** — full, complete pages (`/templates/*`)
- **Sections** — drop-in page sections (`/sections/*`)

## Templates (5)

| Template | What | Use when |
|---|---|---|
| SaaS Landing | Product hero + features + pricing + FAQ | Marketing a product |
| Directory | Searchable + filterable listing | Catalog site, AI tools, etc |
| Ad Landing | High-conversion single-CTA | Paid traffic, Product Hunt launches |
| Lead Magnet | Email-capture focused | Growing a list, free guides |
| Portfolio | Personal brand | Designer / dev portfolio |

Each template is a complete page at `/templates/<slug>` and is also
viewable in the templates gallery at `/templates`.

## Sections (7)

Sections are smaller, drop-in parts of a page:

| Section | What |
|---|---|
| Magazine | Long-form article with pull quotes, footnotes |
| Deck | Slide-by-slide presentation with keyboard nav |
| Data report | KPIs + charts + executive summary |
| Newsletter | Email-style header + articles + subscribe |
| Dashboard | Stats grid + activity feed + side panel |
| HyperFrame | Fullscreen interactive frame with scroll motion |
| Video | Programmatic video templates |

Each lives at `/sections/<slug>` with a gallery at `/sections`.

## How to compose a new page

```tsx
// app/(site)/blog/[slug]/page.tsx
import { Magazine } from "@/components/sections/magazine";
import { Newsletter } from "@/components/sections/newsletter";

export default function Page() {
  return (
    <>
      <Magazine article={...} />
      <Newsletter />
    </>
  );
}
```

(Sections are page compositions, not single components — import
from the page file or copy the source.)

## How to build your own template

1. Pick a layout pattern (linear, magazine, dashboard, etc.)
2. Compose from the 20 marketing blocks in `src/components/blocks/*`
3. Use `FadeIn` / `ScrollReveal` for entrance animations
4. Use `createMetadata()` for SEO
5. Inject the right JSON-LD (Product, Article, FAQ, etc.)
6. Add the route to `src/app/sitemap.ts`
7. Add a card to `/templates` (or `/sections`) so users can find it

How to use this skill

These files live in the .skills/ directory of the aidimension UI repo. Open Design–compatible agents (Claude Code, Cursor, Cline, etc.) auto-detect them. You can also reference them directly:

# in your agent's config
- name: aidimension-ui
  source: https://github.com/javashn/aidimension-ui/tree/main/.skills