Skip to content

Commit 40c7f69

Browse files
steve8708steve8708
authored
Merge pull request #22 from BuilderIO/ai_main_78500db1e831
Update from the Builder.io agent
2 parents 234ee3a + 09ecec8 commit 40c7f69

File tree

17 files changed

+561
-0
lines changed

17 files changed

+561
-0
lines changed

‎.agents/skills/frontend-design/SKILL.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
name: frontend-design
3+
description: >-
4+
Create distinctive, production-grade frontend interfaces with high design
5+
quality. Use when building web components, pages, artifacts, posters, or
6+
applications (websites, landing pages, dashboards, React components,
7+
HTML/CSS layouts, or when styling/beautifying any web UI). Generates
8+
creative, polished UI that avoids generic AI aesthetics.
9+
license: Complete terms in LICENSE.txt
10+
source: https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
11+
---
12+
13+
# Frontend Design
14+
15+
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
16+
17+
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
18+
19+
## Design Thinking
20+
21+
Before coding, understand the context and commit to a BOLD aesthetic direction:
22+
- **Purpose**: What problem does this interface solve? Who uses it?
23+
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
24+
- **Constraints**: Technical requirements (framework, performance, accessibility).
25+
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
26+
27+
**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.
28+
29+
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
30+
- Production-grade and functional
31+
- Visually striking and memorable
32+
- Cohesive with a clear aesthetic point-of-view
33+
- Meticulously refined in every detail
34+
35+
## Frontend Aesthetics Guidelines
36+
37+
Focus on:
38+
- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
39+
- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
40+
- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (`animation-delay`) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
41+
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
42+
- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
43+
44+
## Anti-Patterns to Avoid
45+
46+
NEVER use generic AI-generated aesthetics like:
47+
- Overused font families (Inter, Roboto, Arial, system fonts)
48+
- Clichéd color schemes (particularly purple gradients on white backgrounds)
49+
- Predictable layouts and component patterns
50+
- Cookie-cutter design that lacks context-specific character
51+
52+
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
53+
54+
## Implementation Notes
55+
56+
**Match implementation complexity to the aesthetic vision.** Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
57+
58+
In the agent-native framework context:
59+
- Agent-native apps use React 18, Vite, TailwindCSS, and shadcn/ui
60+
- Custom styles go in component CSS or Tailwind classes — never inline styles
61+
- For complex visual effects, use a `<style>` tag in the component or a dedicated CSS file
62+
- Fonts can be loaded from Google Fonts via `@import` in a CSS file or `<link>` in `index.html`
63+
- Animation libraries: prefer CSS transitions and keyframes; use Framer Motion for complex sequences
64+
- All new UI components should be placed in `client/components/`
65+
66+
## Related Skills
67+
68+
- **self-modifying-code** — The agent can edit source code to apply design changes
69+
- **files-as-database** — Design configuration can be stored as JSON in `data/` for agent-editable theming

‎AGENTS.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,3 +68,20 @@ All code in this project — including standalone scripts in `scripts/` — must
6868
## Image Output
6969

7070
Never save screenshots, images, or other binary artifacts to the repository root or directly inside package directories. Save them to a temporary directory or use an ephemeral path.
71+
72+
## Skills
73+
74+
Agent skills in `.agents/skills/` provide detailed guidance for architectural rules and design patterns. Read the relevant skill before making changes.
75+
76+
| Skill | When to use |
77+
| --------------------- | ---------------------------------------------------- |
78+
| `delegate-to-agent` | Delegating AI work from UI or scripts to the agent |
79+
| `files-as-database` | Storing or reading app state |
80+
| `scripts` | Creating or running agent scripts |
81+
| `sse-file-watcher` | Wiring up real-time UI sync |
82+
| `self-modifying-code` | Editing app source, components, or styles |
83+
| `create-skill` | Adding new skills for the agent |
84+
| `capture-learnings` | Recording corrections and patterns |
85+
| `frontend-design` | Building or styling any web UI, components, or pages |
86+
87+
The **`frontend-design`** skill (sourced from [Anthropic's skills library](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md)) applies whenever the agent generates or modifies UI. It enforces distinctive, production-grade aesthetics — avoiding generic AI-generated design patterns like purple gradients, overused fonts, and cookie-cutter layouts.

‎CLAUDE.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,7 @@
11
Follow all instructions in AGENTS.md.
2+
3+
## Skills
4+
5+
Read `.agents/skills/<skill-name>/SKILL.md` before working in any area covered by a skill.
6+
7+
The **`frontend-design`** skill (`.agents/skills/frontend-design/SKILL.md`) is active globally and applies whenever building or modifying any web UI, components, pages, or visual layouts. It provides guidance on typography, color, motion, spatial composition, and anti-patterns to avoid — ensuring distinctive, production-grade aesthetics over generic AI output.

‎README.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,33 @@ Agent-native apps run inside a **harness** — a host that provides the AI agent
129129

130130
Your app code is identical regardless of harness. Start local, go to cloud when you need teams.
131131

132+
## Skills
133+
134+
Agent-native ships with built-in **skills** — structured guidance files in `.agents/skills/` that teach the AI agent how to work within the framework. Every new app created with `npx @agent-native/core create` includes them automatically.
135+
136+
| Skill | Purpose |
137+
| --------------------- | -------------------------------------- |
138+
| `files-as-database` | Store and read all state as files |
139+
| `delegate-to-agent` | Route AI work through the agent chat |
140+
| `scripts` | Create and run agent-callable scripts |
141+
| `sse-file-watcher` | Keep the UI in sync via SSE |
142+
| `self-modifying-code` | Safely edit app source and components |
143+
| `create-skill` | Add new skills to the agent |
144+
| `capture-learnings` | Record corrections and patterns |
145+
| `frontend-design` | Build distinctive, production-grade UI |
146+
147+
### Frontend Design Skill
148+
149+
The **`frontend-design`** skill (sourced from [Anthropic's skills library](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md)) is active across all templates and new apps. It guides the agent to produce visually striking, memorable interfaces — committing to a clear aesthetic direction rather than defaulting to generic AI-generated patterns.
150+
151+
Key principles it enforces:
152+
153+
- **Typography**: Distinctive, characterful font pairings — never Arial, Inter, or system defaults
154+
- **Color**: Cohesive palettes with dominant colors and sharp accents
155+
- **Motion**: High-impact animations and micro-interactions via CSS or Framer Motion
156+
- **Spatial composition**: Asymmetry, overlap, and unexpected layouts over predictable grids
157+
- **Backgrounds**: Gradient meshes, noise textures, and layered effects over flat solid colors
158+
132159
## Docs
133160

134161
Full documentation at **[agent-native.com](https://agent-native.com)**.

‎packages/core/src/templates/default/AGENTS.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,17 @@ data/ # App data files (watched by SSE)
3838

3939
Skills in `.agents/skills/` provide detailed guidance for each architectural rule. Read them before making changes.
4040

41+
| Skill | When to read |
42+
| --------------------- | -------------------------------------------------------------- |
43+
| `files-as-database` | Before storing or reading any app state |
44+
| `delegate-to-agent` | Before adding LLM calls or AI delegation |
45+
| `scripts` | Before creating or modifying scripts |
46+
| `sse-file-watcher` | Before wiring up real-time UI sync |
47+
| `self-modifying-code` | Before editing source, components, or styles |
48+
| `frontend-design` | Before building or restyling any UI component, page, or layout |
49+
50+
The **`frontend-design`** skill (sourced from [Anthropic's skills library](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md)) enforces distinctive, production-grade aesthetics — committing to a clear visual direction and avoiding generic patterns like purple gradients, overused fonts, and cookie-cutter layouts.
51+
4152
### Key Patterns
4253

4354
**Adding an API route:**

‎templates/analytics/.agents/skills/frontend-design/SKILL.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
name: frontend-design
3+
description: >-
4+
Create distinctive, production-grade frontend interfaces with high design
5+
quality. Use when building web components, pages, artifacts, posters, or
6+
applications (websites, landing pages, dashboards, React components,
7+
HTML/CSS layouts, or when styling/beautifying any web UI). Generates
8+
creative, polished UI that avoids generic AI aesthetics.
9+
license: Complete terms in LICENSE.txt
10+
source: https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
11+
---
12+
13+
# Frontend Design
14+
15+
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
16+
17+
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
18+
19+
## Design Thinking
20+
21+
Before coding, understand the context and commit to a BOLD aesthetic direction:
22+
- **Purpose**: What problem does this interface solve? Who uses it?
23+
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
24+
- **Constraints**: Technical requirements (framework, performance, accessibility).
25+
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
26+
27+
**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.
28+
29+
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
30+
- Production-grade and functional
31+
- Visually striking and memorable
32+
- Cohesive with a clear aesthetic point-of-view
33+
- Meticulously refined in every detail
34+
35+
## Frontend Aesthetics Guidelines
36+
37+
Focus on:
38+
- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
39+
- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
40+
- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (`animation-delay`) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
41+
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
42+
- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
43+
44+
## Anti-Patterns to Avoid
45+
46+
NEVER use generic AI-generated aesthetics like:
47+
- Overused font families (Inter, Roboto, Arial, system fonts)
48+
- Clichéd color schemes (particularly purple gradients on white backgrounds)
49+
- Predictable layouts and component patterns
50+
- Cookie-cutter design that lacks context-specific character
51+
52+
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
53+
54+
## Implementation Notes
55+
56+
**Match implementation complexity to the aesthetic vision.** Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
57+
58+
In the agent-native framework context:
59+
- Agent-native apps use React 18, Vite, TailwindCSS, and shadcn/ui
60+
- Custom styles go in component CSS or Tailwind classes — never inline styles
61+
- For complex visual effects, use a `<style>` tag in the component or a dedicated CSS file
62+
- Fonts can be loaded from Google Fonts via `@import` in a CSS file or `<link>` in `index.html`
63+
- Animation libraries: prefer CSS transitions and keyframes; use Framer Motion for complex sequences
64+
- All new UI components should be placed in `client/components/`
65+
66+
## Related Skills
67+
68+
- **self-modifying-code** — The agent can edit source code to apply design changes
69+
- **files-as-database** — Design configuration can be stored as JSON in `data/` for agent-editable theming

‎templates/analytics/AGENTS.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ This is an **agent-native** app built with `@agent-native/core`. See `.agents/sk
66
- **delegate-to-agent** — UI never calls an LLM directly. All AI goes through the agent chat.
77
- **scripts** — Complex operations are scripts in `scripts/`, run via `pnpm script <name>`.
88
- **sse-file-watcher** — UI stays in sync with agent changes via SSE.
9+
- **frontend-design** — Build distinctive, production-grade UI. Read this skill before creating or restyling any component, page, or layout.
910

1011
---
1112

0 commit comments

Comments
 (0)