About

Imported from AngeleyesTrue/ae-adk (internal/template/templates/.claude/skills/ae-agency-frontend-patterns/SKILL.md). Install upstream with npx skills add AngeleyesTrue/ae-adk --skill ae-agency-frontend-patterns. Copyright stays with the author.

Agency Frontend Patterns

Name: ae-agency-frontend-patterns
Author: AngeleyesTrue

Frontend development patterns for Agency creative production.

Default Tech Stack

Framework: Next.js (App Router)
Styling: Tailwind CSS
Components: Composition-based (no class inheritance)
State: React hooks (useState, useEffect)
Animation: CSS transitions + Framer Motion for complex

Component Architecture

Atomic design: atoms -> molecules -> organisms -> templates -> pages
Each component: single responsibility
Props over context for component configuration
Composition over configuration

File Structure

src/
  app/           # Next.js App Router pages
  components/
    ui/          # Atomic design components
    sections/    # Page sections (hero, features, etc.)
    layouts/     # Layout wrappers
  styles/
    tokens.css   # Design token CSS variables
    globals.css  # Global styles

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/angeleyestrue-ae-adk-ae-agency-frontend-patterns/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

angeleyestrue-ae-adk-ae-agency-frontend-patterns.ocm.jsonjson

{
  "ocm": "1",
  "id": "angeleyestrue-ae-adk-ae-agency-frontend-patterns",
  "kind": "skill",
  "name": "ae-agency-frontend-patterns",
  "description": "Frontend development patterns for AI Agency projects covering tech stack preferences, component architecture, file structure, and coding conventions.",
  "publisher": "AngeleyesTrue",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "agency",
      "frontend",
      "react",
      "nextjs",
      "components",
      "github"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Frontend development patterns for AI Agency projects covering tech stack preferences, component architecture, file structure, and coding conventions."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "github",
      "repository": "https://github.com/AngeleyesTrue/ae-adk",
      "path": "internal/template/templates/.claude/skills/ae-agency-frontend-patterns/SKILL.md",
      "ref": "c494eaf241655c6072fbf95b6300da82a720b112",
      "url": "https://github.com/AngeleyesTrue/ae-adk/blob/c494eaf241655c6072fbf95b6300da82a720b112/internal/template/templates/.claude/skills/ae-agency-frontend-patterns/SKILL.md",
      "key": "AngeleyesTrue/ae-adk/internal/template/templates/.claude/skills/ae-agency-frontend-patterns/SKILL.md"
    }
  },
  "instructions": "# Agency Frontend Patterns\n\nFrontend development patterns for Agency creative production.\n\n## Default Tech Stack\n\n- Framework: Next.js (App Router)\n- Styling: Tailwind CSS\n- Components: Composition-based (no class inheritance)\n- State: React hooks (useState, useEffect)\n- Animation: CSS transitions + Framer Motion for complex\n\n## Component Architecture\n\n- Atomic design: atoms -> molecules -> organisms -> templates -> pages\n- Each component: single responsibility\n- Props over context for component configuration\n- Composition over configuration\n\n## File Structure\n\n```\nsrc/\n  app/           # Next",
  "cost": {
    "context_tokens": 215
  }
}

Fetch it by URL: GET /api/v1/registry/angeleyestrue-ae-adk-ae-agency-frontend-patterns/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.