drop skills from here
This commit is contained in:
@@ -10,6 +10,7 @@ The base url for the api is localhost:8087
|
||||
|
||||
- `GET /api/agents/me` -- confirm your id, role, and chainOfCommand.
|
||||
- Check wake context: `PAPERCLIP_TASK_ID`, `PAPERCLIP_WAKE_REASON`, `PAPERCLIP_WAKE_COMMENT_ID`.
|
||||
- Check `PAPERCLIP_API_URL` for API endpoint (default: http://localhost:3000)
|
||||
|
||||
## 2. Local Planning Check
|
||||
|
||||
@@ -55,9 +56,9 @@ As a Senior Engineer, you own feature development:
|
||||
|
||||
### Passing Work to Code Reviewer
|
||||
When you complete work on an issue:
|
||||
1. Mark the issue as `in_review`
|
||||
2. Assign the issue to the Code Reviewer
|
||||
3. Add a comment summarizing what was done and what files were touched
|
||||
1. Mark the issue as `in_review` (do NOT assign to Code Reviewer)
|
||||
2. Add a comment summarizing what was done and what files were touched
|
||||
3. Security Reviewer will assign to Code Reviewer, then mark as `done` if no issues
|
||||
|
||||
## 7. Fact Extraction
|
||||
|
||||
@@ -80,12 +81,13 @@ When you complete work on an issue:
|
||||
2. Checkout the issue: `POST /api/issues/{id}/checkout`
|
||||
3. Implement the feature/fix
|
||||
4. Run tests and ensure code quality
|
||||
5. Mark issue as `in_review` and assign to Code Reviewer
|
||||
5. Mark issue as `in_review` (do NOT assign to Code Reviewer)
|
||||
6. Add a comment with summary of changes
|
||||
7. Security Reviewer will assign to Code Reviewer, then mark as `done` if no issues
|
||||
|
||||
**Engineers in your team:**
|
||||
- Junior Engineer - works on defined tasks, learns from senior engineers
|
||||
- Founding Engineer - handles architecture and core systems
|
||||
|
||||
**Review flow:**
|
||||
- Engineer → Code Reviewer → Security Reviewer → Done
|
||||
- Engineer → Security Reviewer → Code Reviewer → Done
|
||||
|
||||
49
agents/senior-engineer/life/projects/rssuper/items.yaml
Normal file
49
agents/senior-engineer/life/projects/rssuper/items.yaml
Normal file
@@ -0,0 +1,49 @@
|
||||
- id: rssuper
|
||||
name: Rssuper
|
||||
type: project
|
||||
status: active
|
||||
description: Cross-platform RSS reader with Android, iOS, and Linux native implementations
|
||||
started: 2026-03-30
|
||||
goal: Native business logic migration - implement platform-specific services and UI integration
|
||||
priority: P1
|
||||
tasks:
|
||||
- id: FRE-535
|
||||
title: iOS notification service
|
||||
status: in_review
|
||||
completed: true
|
||||
- id: FRE-536
|
||||
title: Android notification service
|
||||
status: in_review
|
||||
completed: true
|
||||
- id: FRE-531
|
||||
title: Linux background sync service
|
||||
status: in_review
|
||||
completed: true
|
||||
- id: FRE-538
|
||||
title: iOS settings store
|
||||
status: in_review
|
||||
completed: true
|
||||
- id: FRE-541
|
||||
title: iOS bookmark store
|
||||
status: in_review
|
||||
completed: true
|
||||
- id: FRE-544
|
||||
title: iOS UI integration
|
||||
status: in_review
|
||||
completed: true
|
||||
- id: FRE-545
|
||||
title: Android UI integration
|
||||
status: blocked
|
||||
blocked_by:
|
||||
- FRE-531
|
||||
- native-business-logic-migration-16
|
||||
dependencies:
|
||||
- task: native-business-logic-migration-16
|
||||
status: not_found
|
||||
note: Task not found in Rssuper project, may be in different project
|
||||
- task: native-business-logic-migration-17
|
||||
status: not_found
|
||||
note: Task not found in Rssuper project
|
||||
code_reviewer: f274248f
|
||||
security_reviewer: 036d6925
|
||||
board_contact: f4390417
|
||||
31
agents/senior-engineer/life/projects/rssuper/summary.md
Normal file
31
agents/senior-engineer/life/projects/rssuper/summary.md
Normal file
@@ -0,0 +1,31 @@
|
||||
# Rssuper Project
|
||||
|
||||
## Summary
|
||||
|
||||
Rssuper is a cross-platform RSS reader application with native implementations for Android, iOS, and Linux. The project is currently in the native business logic migration phase, implementing platform-specific notification services, bookmark stores, and UI integration.
|
||||
|
||||
## Status
|
||||
|
||||
Active - Native Business Logic Migration
|
||||
|
||||
## Key Tasks (2026-03-31)
|
||||
|
||||
- FRE-535: iOS notification service (in_review)
|
||||
- FRE-536: Android notification service (in_review)
|
||||
- FRE-531: Linux background sync service (in_review)
|
||||
- FRE-538: iOS settings store (in_review)
|
||||
- FRE-541: iOS bookmark store (in_review)
|
||||
- FRE-544: iOS UI integration (in_review)
|
||||
- FRE-545: Android UI integration (blocked - waiting for dependency resolution)
|
||||
|
||||
## Dependencies
|
||||
|
||||
- Task 16 (native-business-logic-migration-16) is referenced in multiple tasks but not found in the Rssuper project
|
||||
- Task 17 (native-business-logic-migration-17) is referenced in Linux background sync task but not found
|
||||
- Cross-project dependencies need to be resolved by board
|
||||
|
||||
## Related Issues
|
||||
|
||||
- [FRE-535](/PAP/issues/FRE-535) - iOS notification service
|
||||
- [FRE-536](/PAP/issues/FRE-536) - Android notification service
|
||||
- [FRE-545](/PAP/issues/FRE-545) - Android UI integration
|
||||
50
check-identity.js
Normal file
50
check-identity.js
Normal file
@@ -0,0 +1,50 @@
|
||||
const http = require('http');
|
||||
|
||||
const agentId = process.env.PAPERCLIP_AGENT_ID;
|
||||
const apiKey = process.env.PAPERCLIP_API_KEY;
|
||||
const apiUrl = process.env.PAPERCLIP_API_URL;
|
||||
const runId = process.env.PAPERCLIP_RUN_ID;
|
||||
|
||||
console.log('Agent ID:', agentId);
|
||||
console.log('API URL:', apiUrl);
|
||||
console.log('Run ID:', runId);
|
||||
|
||||
if (!apiKey || !apiUrl) {
|
||||
console.error('Missing environment variables');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
async function fetchJson(url, options = {}) {
|
||||
const request = http.request({
|
||||
hostname: new URL(url).hostname,
|
||||
port: new URL(url).port,
|
||||
path: new URL(url).pathname,
|
||||
method: options.method || 'GET',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${apiKey}`,
|
||||
'X-Paperclip-Run-Id': runId,
|
||||
...options.headers
|
||||
}
|
||||
}, (response) => {
|
||||
let data = '';
|
||||
response.on('data', chunk => data += chunk);
|
||||
response.on('end', () => {
|
||||
try {
|
||||
console.log(JSON.stringify(JSON.parse(data), null, 2));
|
||||
} catch (e) {
|
||||
console.log(data);
|
||||
}
|
||||
});
|
||||
});
|
||||
request.on('error', console.error);
|
||||
request.end();
|
||||
}
|
||||
|
||||
console.log('\n=== FETCHING AGENT IDENTITY ===\n');
|
||||
fetchJson(`${apiUrl}/api/agents/me`).catch(console.error);
|
||||
|
||||
console.log('\n=== FETCHING INBOX-LITE ===\n');
|
||||
fetchJson(`${apiUrl}/api/agents/me/inbox-lite`).catch(console.error);
|
||||
|
||||
console.log('\n=== FETCHING ALL ASSIGNED ISSUES ===\n');
|
||||
fetchJson(`${apiUrl}/api/companies/${apiKey.split('-')[0] || 'unknown'}/issues?assigneeAgentId=${agentId}&status=todo,in_progress,blocked`).catch(console.error);
|
||||
@@ -1,198 +0,0 @@
|
||||
---
|
||||
name: adapt
|
||||
description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.
|
||||
user-invokable: true
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or component to adapt (optional)
|
||||
required: false
|
||||
- name: context
|
||||
description: What to adapt for (mobile, tablet, desktop, print, email, etc.)
|
||||
required: false
|
||||
---
|
||||
|
||||
Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
|
||||
|
||||
## Assess Adaptation Challenge
|
||||
|
||||
Understand what needs adaptation and why:
|
||||
|
||||
1. **Identify the source context**:
|
||||
- What was it designed for originally? (Desktop web? Mobile app?)
|
||||
- What assumptions were made? (Large screen? Mouse input? Fast connection?)
|
||||
- What works well in current context?
|
||||
|
||||
2. **Understand target context**:
|
||||
- **Device**: Mobile, tablet, desktop, TV, watch, print?
|
||||
- **Input method**: Touch, mouse, keyboard, voice, gamepad?
|
||||
- **Screen constraints**: Size, resolution, orientation?
|
||||
- **Connection**: Fast wifi, slow 3G, offline?
|
||||
- **Usage context**: On-the-go vs desk, quick glance vs focused reading?
|
||||
- **User expectations**: What do users expect on this platform?
|
||||
|
||||
3. **Identify adaptation challenges**:
|
||||
- What won't fit? (Content, navigation, features)
|
||||
- What won't work? (Hover states on touch, tiny touch targets)
|
||||
- What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop)
|
||||
|
||||
**CRITICAL**: Adaptation is not just scaling - it's rethinking the experience for the new context.
|
||||
|
||||
## Plan Adaptation Strategy
|
||||
|
||||
Create context-appropriate strategy:
|
||||
|
||||
### Mobile Adaptation (Desktop → Mobile)
|
||||
|
||||
**Layout Strategy**:
|
||||
- Single column instead of multi-column
|
||||
- Vertical stacking instead of side-by-side
|
||||
- Full-width components instead of fixed widths
|
||||
- Bottom navigation instead of top/side navigation
|
||||
|
||||
**Interaction Strategy**:
|
||||
- Touch targets 44x44px minimum (not hover-dependent)
|
||||
- Swipe gestures where appropriate (lists, carousels)
|
||||
- Bottom sheets instead of dropdowns
|
||||
- Thumbs-first design (controls within thumb reach)
|
||||
- Larger tap areas with more spacing
|
||||
|
||||
**Content Strategy**:
|
||||
- Progressive disclosure (don't show everything at once)
|
||||
- Prioritize primary content (secondary content in tabs/accordions)
|
||||
- Shorter text (more concise)
|
||||
- Larger text (16px minimum)
|
||||
|
||||
**Navigation Strategy**:
|
||||
- Hamburger menu or bottom navigation
|
||||
- Reduce navigation complexity
|
||||
- Sticky headers for context
|
||||
- Back button in navigation flow
|
||||
|
||||
### Tablet Adaptation (Hybrid Approach)
|
||||
|
||||
**Layout Strategy**:
|
||||
- Two-column layouts (not single or three-column)
|
||||
- Side panels for secondary content
|
||||
- Master-detail views (list + detail)
|
||||
- Adaptive based on orientation (portrait vs landscape)
|
||||
|
||||
**Interaction Strategy**:
|
||||
- Support both touch and pointer
|
||||
- Touch targets 44x44px but allow denser layouts than phone
|
||||
- Side navigation drawers
|
||||
- Multi-column forms where appropriate
|
||||
|
||||
### Desktop Adaptation (Mobile → Desktop)
|
||||
|
||||
**Layout Strategy**:
|
||||
- Multi-column layouts (use horizontal space)
|
||||
- Side navigation always visible
|
||||
- Multiple information panels simultaneously
|
||||
- Fixed widths with max-width constraints (don't stretch to 4K)
|
||||
|
||||
**Interaction Strategy**:
|
||||
- Hover states for additional information
|
||||
- Keyboard shortcuts
|
||||
- Right-click context menus
|
||||
- Drag and drop where helpful
|
||||
- Multi-select with Shift/Cmd
|
||||
|
||||
**Content Strategy**:
|
||||
- Show more information upfront (less progressive disclosure)
|
||||
- Data tables with many columns
|
||||
- Richer visualizations
|
||||
- More detailed descriptions
|
||||
|
||||
### Print Adaptation (Screen → Print)
|
||||
|
||||
**Layout Strategy**:
|
||||
- Page breaks at logical points
|
||||
- Remove navigation, footer, interactive elements
|
||||
- Black and white (or limited color)
|
||||
- Proper margins for binding
|
||||
|
||||
**Content Strategy**:
|
||||
- Expand shortened content (show full URLs, hidden sections)
|
||||
- Add page numbers, headers, footers
|
||||
- Include metadata (print date, page title)
|
||||
- Convert charts to print-friendly versions
|
||||
|
||||
### Email Adaptation (Web → Email)
|
||||
|
||||
**Layout Strategy**:
|
||||
- Narrow width (600px max)
|
||||
- Single column only
|
||||
- Inline CSS (no external stylesheets)
|
||||
- Table-based layouts (for email client compatibility)
|
||||
|
||||
**Interaction Strategy**:
|
||||
- Large, obvious CTAs (buttons not text links)
|
||||
- No hover states (not reliable)
|
||||
- Deep links to web app for complex interactions
|
||||
|
||||
## Implement Adaptations
|
||||
|
||||
Apply changes systematically:
|
||||
|
||||
### Responsive Breakpoints
|
||||
|
||||
Choose appropriate breakpoints:
|
||||
- Mobile: 320px-767px
|
||||
- Tablet: 768px-1023px
|
||||
- Desktop: 1024px+
|
||||
- Or content-driven breakpoints (where design breaks)
|
||||
|
||||
### Layout Adaptation Techniques
|
||||
|
||||
- **CSS Grid/Flexbox**: Reflow layouts automatically
|
||||
- **Container Queries**: Adapt based on container, not viewport
|
||||
- **`clamp()`**: Fluid sizing between min and max
|
||||
- **Media queries**: Different styles for different contexts
|
||||
- **Display properties**: Show/hide elements per context
|
||||
|
||||
### Touch Adaptation
|
||||
|
||||
- Increase touch target sizes (44x44px minimum)
|
||||
- Add more spacing between interactive elements
|
||||
- Remove hover-dependent interactions
|
||||
- Add touch feedback (ripples, highlights)
|
||||
- Consider thumb zones (easier to reach bottom than top)
|
||||
|
||||
### Content Adaptation
|
||||
|
||||
- Use `display: none` sparingly (still downloads)
|
||||
- Progressive enhancement (core content first, enhancements on larger screens)
|
||||
- Lazy loading for off-screen content
|
||||
- Responsive images (`srcset`, `picture` element)
|
||||
|
||||
### Navigation Adaptation
|
||||
|
||||
- Transform complex nav to hamburger/drawer on mobile
|
||||
- Bottom nav bar for mobile apps
|
||||
- Persistent side navigation on desktop
|
||||
- Breadcrumbs on smaller screens for context
|
||||
|
||||
**IMPORTANT**: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect.
|
||||
|
||||
**NEVER**:
|
||||
- Hide core functionality on mobile (if it matters, make it work)
|
||||
- Assume desktop = powerful device (consider accessibility, older machines)
|
||||
- Use different information architecture across contexts (confusing)
|
||||
- Break user expectations for platform (mobile users expect mobile patterns)
|
||||
- Forget landscape orientation on mobile/tablet
|
||||
- Use generic breakpoints blindly (use content-driven breakpoints)
|
||||
- Ignore touch on desktop (many desktop devices have touch)
|
||||
|
||||
## Verify Adaptations
|
||||
|
||||
Test thoroughly across contexts:
|
||||
|
||||
- **Real devices**: Test on actual phones, tablets, desktops
|
||||
- **Different orientations**: Portrait and landscape
|
||||
- **Different browsers**: Safari, Chrome, Firefox, Edge
|
||||
- **Different OS**: iOS, Android, Windows, macOS
|
||||
- **Different input methods**: Touch, mouse, keyboard
|
||||
- **Edge cases**: Very small screens (320px), very large screens (4K)
|
||||
- **Slow connections**: Test on throttled network
|
||||
|
||||
Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly.
|
||||
@@ -1,190 +0,0 @@
|
||||
---
|
||||
name: animate
|
||||
description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.
|
||||
user-invokable: true
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or component to animate (optional)
|
||||
required: false
|
||||
---
|
||||
|
||||
Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
### Context Gathering (Do This First)
|
||||
|
||||
You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality/tone (playful vs serious, energetic vs calm), and performance constraints.
|
||||
|
||||
Attempt to gather these from the current thread or codebase.
|
||||
|
||||
1. If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and STOP and call the AskUserQuestionTool to clarify. whether you got it right.
|
||||
2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context.
|
||||
|
||||
Do NOT proceed until you have answers. Guessing leads to inappropriate or excessive animation.
|
||||
|
||||
### Use frontend-design skill
|
||||
|
||||
Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
|
||||
|
||||
---
|
||||
|
||||
## Assess Animation Opportunities
|
||||
|
||||
Analyze where motion would improve the experience:
|
||||
|
||||
1. **Identify static areas**:
|
||||
- **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.)
|
||||
- **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes)
|
||||
- **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious
|
||||
- **Lack of delight**: Functional but joyless interactions
|
||||
- **Missed guidance**: Opportunities to direct attention or explain behavior
|
||||
|
||||
2. **Understand the context**:
|
||||
- What's the personality? (Playful vs serious, energetic vs calm)
|
||||
- What's the performance budget? (Mobile-first? Complex page?)
|
||||
- Who's the audience? (Motion-sensitive users? Power users who want speed?)
|
||||
- What matters most? (One hero animation vs many micro-interactions?)
|
||||
|
||||
If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify.
|
||||
|
||||
**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them.
|
||||
|
||||
## Plan Animation Strategy
|
||||
|
||||
Create a purposeful animation plan:
|
||||
|
||||
- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
|
||||
- **Feedback layer**: Which interactions need acknowledgment?
|
||||
- **Transition layer**: Which state changes need smoothing?
|
||||
- **Delight layer**: Where can we surprise and delight?
|
||||
|
||||
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
|
||||
|
||||
## Implement Animations
|
||||
|
||||
Add motion systematically across these categories:
|
||||
|
||||
### Entrance Animations
|
||||
- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations
|
||||
- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
|
||||
- **Content reveals**: Scroll-triggered animations using intersection observer
|
||||
- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
|
||||
|
||||
### Micro-interactions
|
||||
- **Button feedback**:
|
||||
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
|
||||
- Click: Quick scale down then up (0.95 → 1), ripple effect
|
||||
- Loading: Spinner or pulse state
|
||||
- **Form interactions**:
|
||||
- Input focus: Border color transition, slight scale or glow
|
||||
- Validation: Shake on error, check mark on success, smooth color transitions
|
||||
- **Toggle switches**: Smooth slide + color transition (200-300ms)
|
||||
- **Checkboxes/radio**: Check mark animation, ripple effect
|
||||
- **Like/favorite**: Scale + rotation, particle effects, color transition
|
||||
|
||||
### State Transitions
|
||||
- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms)
|
||||
- **Expand/collapse**: Height transition with overflow handling, icon rotation
|
||||
- **Loading states**: Skeleton screen fades, spinner animations, progress bars
|
||||
- **Success/error**: Color transitions, icon animations, gentle scale pulse
|
||||
- **Enable/disable**: Opacity transitions, cursor changes
|
||||
|
||||
### Navigation & Flow
|
||||
- **Page transitions**: Crossfade between routes, shared element transitions
|
||||
- **Tab switching**: Slide indicator, content fade/slide
|
||||
- **Carousel/slider**: Smooth transforms, snap points, momentum
|
||||
- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators
|
||||
|
||||
### Feedback & Guidance
|
||||
- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights
|
||||
- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning
|
||||
- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation
|
||||
- **Focus flow**: Highlight path through form or workflow
|
||||
|
||||
### Delight Moments
|
||||
- **Empty states**: Subtle floating animations on illustrations
|
||||
- **Completed actions**: Confetti, check mark flourish, success celebrations
|
||||
- **Easter eggs**: Hidden interactions for discovery
|
||||
- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches
|
||||
|
||||
## Technical Implementation
|
||||
|
||||
Use appropriate techniques for each animation:
|
||||
|
||||
### Timing & Easing
|
||||
|
||||
**Durations by purpose:**
|
||||
- **100-150ms**: Instant feedback (button press, toggle)
|
||||
- **200-300ms**: State changes (hover, menu open)
|
||||
- **300-500ms**: Layout changes (accordion, modal)
|
||||
- **500-800ms**: Entrance animations (page load)
|
||||
|
||||
**Easing curves (use these, not CSS defaults):**
|
||||
```css
|
||||
/* Recommended - natural deceleration */
|
||||
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, refined */
|
||||
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* Slightly snappier */
|
||||
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Confident, decisive */
|
||||
|
||||
/* AVOID - feel dated and tacky */
|
||||
/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */
|
||||
/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */
|
||||
```
|
||||
|
||||
**Exit animations are faster than entrances.** Use ~75% of enter duration.
|
||||
|
||||
### CSS Animations
|
||||
```css
|
||||
/* Prefer for simple, declarative animations */
|
||||
- transitions for state changes
|
||||
- @keyframes for complex sequences
|
||||
- transform + opacity only (GPU-accelerated)
|
||||
```
|
||||
|
||||
### JavaScript Animation
|
||||
```javascript
|
||||
/* Use for complex, interactive animations */
|
||||
- Web Animations API for programmatic control
|
||||
- Framer Motion for React
|
||||
- GSAP for complex sequences
|
||||
```
|
||||
|
||||
### Performance
|
||||
- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties
|
||||
- **will-change**: Add sparingly for known expensive animations
|
||||
- **Reduce paint**: Minimize repaints, use `contain` where appropriate
|
||||
- **Monitor FPS**: Ensure 60fps on target devices
|
||||
|
||||
### Accessibility
|
||||
```css
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**NEVER**:
|
||||
- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself
|
||||
- Animate layout properties (width, height, top, left)—use transform instead
|
||||
- Use durations over 500ms for feedback—it feels laggy
|
||||
- Animate without purpose—every animation needs a reason
|
||||
- Ignore `prefers-reduced-motion`—this is an accessibility violation
|
||||
- Animate everything—animation fatigue makes interfaces feel exhausting
|
||||
- Block interaction during animations unless intentional
|
||||
|
||||
## Verify Quality
|
||||
|
||||
Test animations thoroughly:
|
||||
|
||||
- **Smooth at 60fps**: No jank on target devices
|
||||
- **Feels natural**: Easing curves feel organic, not robotic
|
||||
- **Appropriate timing**: Not too fast (jarring) or too slow (laggy)
|
||||
- **Reduced motion works**: Animations disabled or simplified appropriately
|
||||
- **Doesn't block**: Users can interact during/after animations
|
||||
- **Adds value**: Makes interface clearer or more delightful
|
||||
|
||||
Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right.
|
||||
@@ -1,128 +0,0 @@
|
||||
---
|
||||
name: audit
|
||||
description: Perform comprehensive audit of interface quality across accessibility, performance, theming, and responsive design. Generates detailed report of issues with severity ratings and recommendations.
|
||||
user-invokable: true
|
||||
args:
|
||||
- name: area
|
||||
description: The feature or area to audit (optional)
|
||||
required: false
|
||||
---
|
||||
|
||||
Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address.
|
||||
|
||||
**First**: Use the frontend-design skill for design principles and anti-patterns.
|
||||
|
||||
## Diagnostic Scan
|
||||
|
||||
Run comprehensive checks across multiple dimensions:
|
||||
|
||||
1. **Accessibility (A11y)** - Check for:
|
||||
- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA)
|
||||
- **Missing ARIA**: Interactive elements without proper roles, labels, or states
|
||||
- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps
|
||||
- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons
|
||||
- **Alt text**: Missing or poor image descriptions
|
||||
- **Form issues**: Inputs without labels, poor error messaging, missing required indicators
|
||||
|
||||
2. **Performance** - Check for:
|
||||
- **Layout thrashing**: Reading/writing layout properties in loops
|
||||
- **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity
|
||||
- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change
|
||||
- **Bundle size**: Unnecessary imports, unused dependencies
|
||||
- **Render performance**: Unnecessary re-renders, missing memoization
|
||||
|
||||
3. **Theming** - Check for:
|
||||
- **Hard-coded colors**: Colors not using design tokens
|
||||
- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme
|
||||
- **Inconsistent tokens**: Using wrong tokens, mixing token types
|
||||
- **Theme switching issues**: Values that don't update on theme change
|
||||
|
||||
4. **Responsive Design** - Check for:
|
||||
- **Fixed widths**: Hard-coded widths that break on mobile
|
||||
- **Touch targets**: Interactive elements < 44x44px
|
||||
- **Horizontal scroll**: Content overflow on narrow viewports
|
||||
- **Text scaling**: Layouts that break when text size increases
|
||||
- **Missing breakpoints**: No mobile/tablet variants
|
||||
|
||||
5. **Anti-Patterns (CRITICAL)** - Check against ALL the **DON'T** guidelines in the frontend-design skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy).
|
||||
|
||||
**CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit.
|
||||
|
||||
## Generate Comprehensive Report
|
||||
|
||||
Create a detailed audit report with the following structure:
|
||||
|
||||
### Anti-Patterns Verdict
|
||||
**Start here.** Pass/fail: Does this look AI-generated? List specific tells from the skill's Anti-Patterns section. Be brutally honest.
|
||||
|
||||
### Executive Summary
|
||||
- Total issues found (count by severity)
|
||||
- Most critical issues (top 3-5)
|
||||
- Overall quality score (if applicable)
|
||||
- Recommended next steps
|
||||
|
||||
### Detailed Findings by Severity
|
||||
|
||||
For each issue, document:
|
||||
- **Location**: Where the issue occurs (component, file, line)
|
||||
- **Severity**: Critical / High / Medium / Low
|
||||
- **Category**: Accessibility / Performance / Theming / Responsive
|
||||
- **Description**: What the issue is
|
||||
- **Impact**: How it affects users
|
||||
- **WCAG/Standard**: Which standard it violates (if applicable)
|
||||
- **Recommendation**: How to fix it
|
||||
- **Suggested command**: Which command to use (prefer: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /critique, /colorize — or other installed skills you're sure exist)
|
||||
|
||||
#### Critical Issues
|
||||
[Issues that block core functionality or violate WCAG A]
|
||||
|
||||
#### High-Severity Issues
|
||||
[Significant usability/accessibility impact, WCAG AA violations]
|
||||
|
||||
#### Medium-Severity Issues
|
||||
[Quality issues, WCAG AAA violations, performance concerns]
|
||||
|
||||
#### Low-Severity Issues
|
||||
[Minor inconsistencies, optimization opportunities]
|
||||
|
||||
### Patterns & Systemic Issues
|
||||
|
||||
Identify recurring problems:
|
||||
- "Hard-coded colors appear in 15+ components, should use design tokens"
|
||||
- "Touch targets consistently too small (<44px) throughout mobile experience"
|
||||
- "Missing focus indicators on all custom interactive components"
|
||||
|
||||
### Positive Findings
|
||||
|
||||
Note what's working well:
|
||||
- Good practices to maintain
|
||||
- Exemplary implementations to replicate elsewhere
|
||||
|
||||
### Recommendations by Priority
|
||||
|
||||
Create actionable plan:
|
||||
1. **Immediate**: Critical blockers to fix first
|
||||
2. **Short-term**: High-severity issues (this sprint)
|
||||
3. **Medium-term**: Quality improvements (next sprint)
|
||||
4. **Long-term**: Nice-to-haves and optimizations
|
||||
|
||||
### Suggested Commands for Fixes
|
||||
|
||||
Map issues to available commands. Prefer these: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /critique, /colorize. You may also suggest other installed skills you're sure exist, but never invent commands.
|
||||
|
||||
Examples:
|
||||
- "Use `/normalize` to align with design system (addresses N theming issues)"
|
||||
- "Use `/optimize` to improve performance (addresses N performance issues)"
|
||||
- "Use `/harden` to improve resilience (addresses N edge cases)"
|
||||
|
||||
**IMPORTANT**: Be thorough but actionable. Too many low-priority issues creates noise. Focus on what actually matters.
|
||||
|
||||
**NEVER**:
|
||||
- Report issues without explaining impact (why does this matter?)
|
||||
- Mix severity levels inconsistently
|
||||
- Skip positive findings (celebrate what works)
|
||||
- Provide generic recommendations (be specific and actionable)
|
||||
- Forget to prioritize (everything can't be critical)
|
||||
- Report false positives without verification
|
||||
|
||||
Remember: You're a quality auditor with exceptional attention to detail. Document systematically, prioritize ruthlessly, and provide clear paths to improvement. A good audit makes fixing easy.
|
||||
@@ -1,132 +0,0 @@
|
||||
---
|
||||
name: bolder
|
||||
description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability.
|
||||
user-invokable: true
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or component to make bolder (optional)
|
||||
required: false
|
||||
---
|
||||
|
||||
Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences.
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
### Context Gathering (Do This First)
|
||||
|
||||
You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality/tone, and everything else that a great human designer would need as well.
|
||||
|
||||
Attempt to gather these from the current thread or codebase.
|
||||
|
||||
1. If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and STOP and call the AskUserQuestionTool to clarify. whether you got it right.
|
||||
2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context.
|
||||
|
||||
Do NOT proceed until you have answers. Guessing leads to generic AI slop.
|
||||
|
||||
### Use frontend-design skill
|
||||
|
||||
Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
|
||||
|
||||
---
|
||||
|
||||
## Assess Current State
|
||||
|
||||
Analyze what makes the design feel too safe or boring:
|
||||
|
||||
1. **Identify weakness sources**:
|
||||
- **Generic choices**: System fonts, basic colors, standard layouts
|
||||
- **Timid scale**: Everything is medium-sized with no drama
|
||||
- **Low contrast**: Everything has similar visual weight
|
||||
- **Static**: No motion, no energy, no life
|
||||
- **Predictable**: Standard patterns with no surprises
|
||||
- **Flat hierarchy**: Nothing stands out or commands attention
|
||||
|
||||
2. **Understand the context**:
|
||||
- What's the brand personality? (How far can we push?)
|
||||
- What's the purpose? (Marketing can be bolder than financial dashboards)
|
||||
- Who's the audience? (What will resonate?)
|
||||
- What are the constraints? (Brand guidelines, accessibility, performance)
|
||||
|
||||
If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify.
|
||||
|
||||
**CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos.
|
||||
|
||||
**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the frontend-design skill before proceeding. Bold means distinctive, not "more effects."
|
||||
|
||||
## Plan Amplification
|
||||
|
||||
Create a strategy to increase impact while maintaining coherence:
|
||||
|
||||
- **Focal point**: What should be the hero moment? (Pick ONE, make it amazing)
|
||||
- **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane.
|
||||
- **Risk budget**: How experimental can we be? Push boundaries within constraints.
|
||||
- **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast)
|
||||
|
||||
**IMPORTANT**: Bold design must still be usable. Impact without function is just decoration.
|
||||
|
||||
## Amplify the Design
|
||||
|
||||
Systematically increase impact across these dimensions:
|
||||
|
||||
### Typography Amplification
|
||||
- **Replace generic fonts**: Swap system fonts for distinctive choices (see frontend-design skill for inspiration)
|
||||
- **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x)
|
||||
- **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400
|
||||
- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default)
|
||||
|
||||
### Color Intensification
|
||||
- **Increase saturation**: Shift to more vibrant, energetic colors (but not neon)
|
||||
- **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop
|
||||
- **Dominant color strategy**: Let one bold color own 60% of the design
|
||||
- **Sharp accents**: High-contrast accent colors that pop
|
||||
- **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette
|
||||
- **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue)
|
||||
|
||||
### Spatial Drama
|
||||
- **Extreme scale jumps**: Make important elements 3-5x larger than surroundings
|
||||
- **Break the grid**: Let hero elements escape containers and cross boundaries
|
||||
- **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry
|
||||
- **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px)
|
||||
- **Overlap**: Layer elements intentionally for depth
|
||||
|
||||
### Visual Effects
|
||||
- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles)
|
||||
- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue)
|
||||
- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop)
|
||||
- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side)
|
||||
- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand
|
||||
|
||||
### Motion & Animation
|
||||
- **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays
|
||||
- **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences
|
||||
- **Micro-interactions**: Satisfying hover effects, click feedback, state changes
|
||||
- **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect)
|
||||
|
||||
### Composition Boldness
|
||||
- **Hero moments**: Create clear focal points with dramatic treatment
|
||||
- **Diagonal flows**: Escape horizontal/vertical rigidity with diagonal arrangements
|
||||
- **Full-bleed elements**: Use full viewport width/height for impact
|
||||
- **Unexpected proportions**: Golden ratio? Throw it out. Try 70/30, 80/20 splits
|
||||
|
||||
**NEVER**:
|
||||
- Add effects randomly without purpose (chaos ≠ bold)
|
||||
- Sacrifice readability for aesthetics (body text must be readable)
|
||||
- Make everything bold (then nothing is bold - need contrast)
|
||||
- Ignore accessibility (bold design must still meet WCAG standards)
|
||||
- Overwhelm with motion (animation fatigue is real)
|
||||
- Copy trendy aesthetics blindly (bold means distinctive, not derivative)
|
||||
|
||||
## Verify Quality
|
||||
|
||||
Ensure amplification maintains usability and coherence:
|
||||
|
||||
- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over.
|
||||
- **Still functional**: Can users accomplish tasks without distraction?
|
||||
- **Coherent**: Does everything feel intentional and unified?
|
||||
- **Memorable**: Will users remember this experience?
|
||||
- **Performant**: Do all these effects run smoothly?
|
||||
- **Accessible**: Does it still meet accessibility standards?
|
||||
|
||||
**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects."
|
||||
|
||||
Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable.
|
||||
@@ -1,179 +0,0 @@
|
||||
---
|
||||
name: clarify
|
||||
description: Improve unclear UX copy, error messages, microcopy, labels, and instructions. Makes interfaces easier to understand and use.
|
||||
user-invokable: true
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or component with unclear copy (optional)
|
||||
required: false
|
||||
---
|
||||
|
||||
Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use.
|
||||
|
||||
## Assess Current Copy
|
||||
|
||||
Identify what makes the text unclear or ineffective:
|
||||
|
||||
1. **Find clarity problems**:
|
||||
- **Jargon**: Technical terms users won't understand
|
||||
- **Ambiguity**: Multiple interpretations possible
|
||||
- **Passive voice**: "Your file has been uploaded" vs "We uploaded your file"
|
||||
- **Length**: Too wordy or too terse
|
||||
- **Assumptions**: Assuming user knowledge they don't have
|
||||
- **Missing context**: Users don't know what to do or why
|
||||
- **Tone mismatch**: Too formal, too casual, or inappropriate for situation
|
||||
|
||||
2. **Understand the context**:
|
||||
- Who's the audience? (Technical? General? First-time users?)
|
||||
- What's the user's mental state? (Stressed during error? Confident during success?)
|
||||
- What's the action? (What do we want users to do?)
|
||||
- What's the constraint? (Character limits? Space limitations?)
|
||||
|
||||
**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets.
|
||||
|
||||
## Plan Copy Improvements
|
||||
|
||||
Create a strategy for clearer communication:
|
||||
|
||||
- **Primary message**: What's the ONE thing users need to know?
|
||||
- **Action needed**: What should users do next (if anything)?
|
||||
- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?)
|
||||
- **Constraints**: Length limits, brand voice, localization considerations
|
||||
|
||||
**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words.
|
||||
|
||||
## Improve Copy Systematically
|
||||
|
||||
Refine text across these common areas:
|
||||
|
||||
### Error Messages
|
||||
**Bad**: "Error 403: Forbidden"
|
||||
**Good**: "You don't have permission to view this page. Contact your admin for access."
|
||||
|
||||
**Bad**: "Invalid input"
|
||||
**Good**: "Email addresses need an @ symbol. Try: name@example.com"
|
||||
|
||||
**Principles**:
|
||||
- Explain what went wrong in plain language
|
||||
- Suggest how to fix it
|
||||
- Don't blame the user
|
||||
- Include examples when helpful
|
||||
- Link to help/support if applicable
|
||||
|
||||
### Form Labels & Instructions
|
||||
**Bad**: "DOB (MM/DD/YYYY)"
|
||||
**Good**: "Date of birth" (with placeholder showing format)
|
||||
|
||||
**Bad**: "Enter value here"
|
||||
**Good**: "Your email address" or "Company name"
|
||||
|
||||
**Principles**:
|
||||
- Use clear, specific labels (not generic placeholders)
|
||||
- Show format expectations with examples
|
||||
- Explain why you're asking (when not obvious)
|
||||
- Put instructions before the field, not after
|
||||
- Keep required field indicators clear
|
||||
|
||||
### Button & CTA Text
|
||||
**Bad**: "Click here" | "Submit" | "OK"
|
||||
**Good**: "Create account" | "Save changes" | "Got it, thanks"
|
||||
|
||||
**Principles**:
|
||||
- Describe the action specifically
|
||||
- Use active voice (verb + noun)
|
||||
- Match user's mental model
|
||||
- Be specific ("Save" is better than "OK")
|
||||
|
||||
### Help Text & Tooltips
|
||||
**Bad**: "This is the username field"
|
||||
**Good**: "Choose a username. You can change this later in Settings."
|
||||
|
||||
**Principles**:
|
||||
- Add value (don't just repeat the label)
|
||||
- Answer the implicit question ("What is this?" or "Why do you need this?")
|
||||
- Keep it brief but complete
|
||||
- Link to detailed docs if needed
|
||||
|
||||
### Empty States
|
||||
**Bad**: "No items"
|
||||
**Good**: "No projects yet. Create your first project to get started."
|
||||
|
||||
**Principles**:
|
||||
- Explain why it's empty (if not obvious)
|
||||
- Show next action clearly
|
||||
- Make it welcoming, not dead-end
|
||||
|
||||
### Success Messages
|
||||
**Bad**: "Success"
|
||||
**Good**: "Settings saved! Your changes will take effect immediately."
|
||||
|
||||
**Principles**:
|
||||
- Confirm what happened
|
||||
- Explain what happens next (if relevant)
|
||||
- Be brief but complete
|
||||
- Match the user's emotional moment (celebrate big wins)
|
||||
|
||||
### Loading States
|
||||
**Bad**: "Loading..." (for 30+ seconds)
|
||||
**Good**: "Analyzing your data... this usually takes 30-60 seconds"
|
||||
|
||||
**Principles**:
|
||||
- Set expectations (how long?)
|
||||
- Explain what's happening (when it's not obvious)
|
||||
- Show progress when possible
|
||||
- Offer escape hatch if appropriate ("Cancel")
|
||||
|
||||
### Confirmation Dialogs
|
||||
**Bad**: "Are you sure?"
|
||||
**Good**: "Delete 'Project Alpha'? This can't be undone."
|
||||
|
||||
**Principles**:
|
||||
- State the specific action
|
||||
- Explain consequences (especially for destructive actions)
|
||||
- Use clear button labels ("Delete project" not "Yes")
|
||||
- Don't overuse confirmations (only for risky actions)
|
||||
|
||||
### Navigation & Wayfinding
|
||||
**Bad**: Generic labels like "Items" | "Things" | "Stuff"
|
||||
**Good**: Specific labels like "Your projects" | "Team members" | "Settings"
|
||||
|
||||
**Principles**:
|
||||
- Be specific and descriptive
|
||||
- Use language users understand (not internal jargon)
|
||||
- Make hierarchy clear
|
||||
- Consider information scent (breadcrumbs, current location)
|
||||
|
||||
## Apply Clarity Principles
|
||||
|
||||
Every piece of copy should follow these rules:
|
||||
|
||||
1. **Be specific**: "Enter email" not "Enter value"
|
||||
2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity)
|
||||
3. **Be active**: "Save changes" not "Changes will be saved"
|
||||
4. **Be human**: "Oops, something went wrong" not "System error encountered"
|
||||
5. **Be helpful**: Tell users what to do, not just what happened
|
||||
6. **Be consistent**: Use same terms throughout (don't vary for variety)
|
||||
|
||||
**NEVER**:
|
||||
- Use jargon without explanation
|
||||
- Blame users ("You made an error" → "This field is required")
|
||||
- Be vague ("Something went wrong" without explanation)
|
||||
- Use passive voice unnecessarily
|
||||
- Write overly long explanations (be concise)
|
||||
- Use humor for errors (be empathetic instead)
|
||||
- Assume technical knowledge
|
||||
- Vary terminology (pick one term and stick with it)
|
||||
- Repeat information (headers restating intros, redundant explanations)
|
||||
- Use placeholders as the only labels (they disappear when users type)
|
||||
|
||||
## Verify Improvements
|
||||
|
||||
Test that copy improvements work:
|
||||
|
||||
- **Comprehension**: Can users understand without context?
|
||||
- **Actionability**: Do users know what to do next?
|
||||
- **Brevity**: Is it as short as possible while remaining clear?
|
||||
- **Consistency**: Does it match terminology elsewhere?
|
||||
- **Tone**: Is it appropriate for the situation?
|
||||
|
||||
Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human.
|
||||
@@ -1,158 +0,0 @@
|
||||
---
|
||||
name: colorize
|
||||
description: Add strategic color to features that are too monochromatic or lack visual interest. Makes interfaces more engaging and expressive.
|
||||
user-invokable: true
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or component to colorize (optional)
|
||||
required: false
|
||||
---
|
||||
|
||||
Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality.
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
### Context Gathering (Do This First)
|
||||
|
||||
You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality/tone, and especially existing brand colors.
|
||||
|
||||
Attempt to gather these from the current thread or codebase.
|
||||
|
||||
1. If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and STOP and call the AskUserQuestionTool to clarify. whether you got it right.
|
||||
2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context.
|
||||
|
||||
Do NOT proceed until you have answers. Guessing leads to generic AI slop colors.
|
||||
|
||||
### Use frontend-design skill
|
||||
|
||||
Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
|
||||
|
||||
---
|
||||
|
||||
## Assess Color Opportunity
|
||||
|
||||
Analyze the current state and identify opportunities:
|
||||
|
||||
1. **Understand current state**:
|
||||
- **Color absence**: Pure grayscale? Limited neutrals? One timid accent?
|
||||
- **Missed opportunities**: Where could color add meaning, hierarchy, or delight?
|
||||
- **Context**: What's appropriate for this domain and audience?
|
||||
- **Brand**: Are there existing brand colors we should use?
|
||||
|
||||
2. **Identify where color adds value**:
|
||||
- **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue)
|
||||
- **Hierarchy**: Drawing attention to important elements
|
||||
- **Categorization**: Different sections, types, or states
|
||||
- **Emotional tone**: Warmth, energy, trust, creativity
|
||||
- **Wayfinding**: Helping users navigate and understand structure
|
||||
- **Delight**: Moments of visual interest and personality
|
||||
|
||||
If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify.
|
||||
|
||||
**CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose.
|
||||
|
||||
## Plan Color Strategy
|
||||
|
||||
Create a purposeful color introduction plan:
|
||||
|
||||
- **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals)
|
||||
- **Dominant color**: Which color owns 60% of colored elements?
|
||||
- **Accent colors**: Which colors provide contrast and highlights? (30% and 10%)
|
||||
- **Application strategy**: Where does each color appear and why?
|
||||
|
||||
**IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more.
|
||||
|
||||
## Introduce Color Strategically
|
||||
|
||||
Add color systematically across these dimensions:
|
||||
|
||||
### Semantic Color
|
||||
- **State indicators**:
|
||||
- Success: Green tones (emerald, forest, mint)
|
||||
- Error: Red/pink tones (rose, crimson, coral)
|
||||
- Warning: Orange/amber tones
|
||||
- Info: Blue tones (sky, ocean, indigo)
|
||||
- Neutral: Gray/slate for inactive states
|
||||
|
||||
- **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.)
|
||||
- **Progress indicators**: Colored bars, rings, or charts showing completion or health
|
||||
|
||||
### Accent Color Application
|
||||
- **Primary actions**: Color the most important buttons/CTAs
|
||||
- **Links**: Add color to clickable text (maintain accessibility)
|
||||
- **Icons**: Colorize key icons for recognition and personality
|
||||
- **Headers/titles**: Add color to section headers or key labels
|
||||
- **Hover states**: Introduce color on interaction
|
||||
|
||||
### Background & Surfaces
|
||||
- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`)
|
||||
- **Colored sections**: Use subtle background colors to separate areas
|
||||
- **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue)
|
||||
- **Cards & surfaces**: Tint cards or surfaces slightly for warmth
|
||||
|
||||
**Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales.
|
||||
|
||||
### Data Visualization
|
||||
- **Charts & graphs**: Use color to encode categories or values
|
||||
- **Heatmaps**: Color intensity shows density or importance
|
||||
- **Comparison**: Color coding for different datasets or timeframes
|
||||
|
||||
### Borders & Accents
|
||||
- **Accent borders**: Add colored left/top borders to cards or sections
|
||||
- **Underlines**: Color underlines for emphasis or active states
|
||||
- **Dividers**: Subtle colored dividers instead of gray lines
|
||||
- **Focus rings**: Colored focus indicators matching brand
|
||||
|
||||
### Typography Color
|
||||
- **Colored headings**: Use brand colors for section headings (maintain contrast)
|
||||
- **Highlight text**: Color for emphasis or categories
|
||||
- **Labels & tags**: Small colored labels for metadata or categories
|
||||
|
||||
### Decorative Elements
|
||||
- **Illustrations**: Add colored illustrations or icons
|
||||
- **Shapes**: Geometric shapes in brand colors as background elements
|
||||
- **Gradients**: Colorful gradient overlays or mesh backgrounds
|
||||
- **Blobs/organic shapes**: Soft colored shapes for visual interest
|
||||
|
||||
## Balance & Refinement
|
||||
|
||||
Ensure color addition improves rather than overwhelms:
|
||||
|
||||
### Maintain Hierarchy
|
||||
- **Dominant color** (60%): Primary brand color or most used accent
|
||||
- **Secondary color** (30%): Supporting color for variety
|
||||
- **Accent color** (10%): High contrast for key moments
|
||||
- **Neutrals** (remaining): Gray/black/white for structure
|
||||
|
||||
### Accessibility
|
||||
- **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components)
|
||||
- **Don't rely on color alone**: Use icons, labels, or patterns alongside color
|
||||
- **Test for color blindness**: Verify red/green combinations work for all users
|
||||
|
||||
### Cohesion
|
||||
- **Consistent palette**: Use colors from defined palette, not arbitrary choices
|
||||
- **Systematic application**: Same color meanings throughout (green always = success)
|
||||
- **Temperature consistency**: Warm palette stays warm, cool stays cool
|
||||
|
||||
**NEVER**:
|
||||
- Use every color in the rainbow (choose 2-4 colors beyond neutrals)
|
||||
- Apply color randomly without semantic meaning
|
||||
- Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead
|
||||
- Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication
|
||||
- Use pure black (`#000`) or pure white (`#fff`) for large areas
|
||||
- Violate WCAG contrast requirements
|
||||
- Use color as the only indicator (accessibility issue)
|
||||
- Make everything colorful (defeats the purpose)
|
||||
- Default to purple-blue gradients (AI slop aesthetic)
|
||||
|
||||
## Verify Color Addition
|
||||
|
||||
Test that colorization improves the experience:
|
||||
|
||||
- **Better hierarchy**: Does color guide attention appropriately?
|
||||
- **Clearer meaning**: Does color help users understand states/categories?
|
||||
- **More engaging**: Does the interface feel warmer and more inviting?
|
||||
- **Still accessible**: Do all color combinations meet WCAG standards?
|
||||
- **Not overwhelming**: Is color balanced and purposeful?
|
||||
|
||||
Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional.
|
||||
@@ -1,718 +0,0 @@
|
||||
---
|
||||
name: create-agent-adapter
|
||||
description: >
|
||||
Technical guide for creating a new Paperclip agent adapter. Use when building
|
||||
a new adapter package, adding support for a new AI coding tool (e.g. a new
|
||||
CLI agent, API-based agent, or custom process), or when modifying the adapter
|
||||
system. Covers the required interfaces, module structure, registration points,
|
||||
and conventions derived from the existing claude-local and codex-local adapters.
|
||||
---
|
||||
|
||||
# Creating a Paperclip Agent Adapter
|
||||
|
||||
An adapter bridges Paperclip's orchestration layer to a specific AI agent runtime (Claude Code, Codex CLI, a custom process, an HTTP endpoint, etc.). Each adapter is a self-contained package that provides implementations for **three consumers**: the server, the UI, and the CLI.
|
||||
|
||||
---
|
||||
|
||||
## 1. Architecture Overview
|
||||
|
||||
```
|
||||
packages/adapters/<name>/
|
||||
src/
|
||||
index.ts # Shared metadata (type, label, models, agentConfigurationDoc)
|
||||
server/
|
||||
index.ts # Server exports: execute, sessionCodec, parse helpers
|
||||
execute.ts # Core execution logic (AdapterExecutionContext -> AdapterExecutionResult)
|
||||
parse.ts # Stdout/result parsing for the agent's output format
|
||||
ui/
|
||||
index.ts # UI exports: parseStdoutLine, buildConfig
|
||||
parse-stdout.ts # Line-by-line stdout -> TranscriptEntry[] for the run viewer
|
||||
build-config.ts # CreateConfigValues -> adapterConfig JSON for agent creation form
|
||||
cli/
|
||||
index.ts # CLI exports: formatStdoutEvent
|
||||
format-event.ts # Colored terminal output for `paperclipai run --watch`
|
||||
package.json
|
||||
tsconfig.json
|
||||
```
|
||||
|
||||
Three separate registries consume adapter modules:
|
||||
|
||||
| Registry | Location | Interface |
|
||||
|----------|----------|-----------|
|
||||
| Server | `server/src/adapters/registry.ts` | `ServerAdapterModule` |
|
||||
| UI | `ui/src/adapters/registry.ts` | `UIAdapterModule` |
|
||||
| CLI | `cli/src/adapters/registry.ts` | `CLIAdapterModule` |
|
||||
|
||||
---
|
||||
|
||||
## 2. Shared Types (`@paperclipai/adapter-utils`)
|
||||
|
||||
All adapter interfaces live in `packages/adapter-utils/src/types.ts`. Import from `@paperclipai/adapter-utils` (types) or `@paperclipai/adapter-utils/server-utils` (runtime helpers).
|
||||
|
||||
### Core Interfaces
|
||||
|
||||
```ts
|
||||
// The execute function signature — every adapter must implement this
|
||||
interface AdapterExecutionContext {
|
||||
runId: string;
|
||||
agent: AdapterAgent; // { id, companyId, name, adapterType, adapterConfig }
|
||||
runtime: AdapterRuntime; // { sessionId, sessionParams, sessionDisplayId, taskKey }
|
||||
config: Record<string, unknown>; // The agent's adapterConfig blob
|
||||
context: Record<string, unknown>; // Runtime context (taskId, wakeReason, approvalId, etc.)
|
||||
onLog: (stream: "stdout" | "stderr", chunk: string) => Promise<void>;
|
||||
onMeta?: (meta: AdapterInvocationMeta) => Promise<void>;
|
||||
authToken?: string;
|
||||
}
|
||||
|
||||
interface AdapterExecutionResult {
|
||||
exitCode: number | null;
|
||||
signal: string | null;
|
||||
timedOut: boolean;
|
||||
errorMessage?: string | null;
|
||||
usage?: UsageSummary; // { inputTokens, outputTokens, cachedInputTokens? }
|
||||
sessionId?: string | null; // Legacy — prefer sessionParams
|
||||
sessionParams?: Record<string, unknown> | null; // Opaque session state persisted between runs
|
||||
sessionDisplayId?: string | null;
|
||||
provider?: string | null; // "anthropic", "openai", etc.
|
||||
model?: string | null;
|
||||
costUsd?: number | null;
|
||||
resultJson?: Record<string, unknown> | null;
|
||||
summary?: string | null; // Human-readable summary of what the agent did
|
||||
clearSession?: boolean; // true = tell Paperclip to forget the stored session
|
||||
}
|
||||
|
||||
interface AdapterSessionCodec {
|
||||
deserialize(raw: unknown): Record<string, unknown> | null;
|
||||
serialize(params: Record<string, unknown> | null): Record<string, unknown> | null;
|
||||
getDisplayId?(params: Record<string, unknown> | null): string | null;
|
||||
}
|
||||
```
|
||||
|
||||
### Module Interfaces
|
||||
|
||||
```ts
|
||||
// Server — registered in server/src/adapters/registry.ts
|
||||
interface ServerAdapterModule {
|
||||
type: string;
|
||||
execute(ctx: AdapterExecutionContext): Promise<AdapterExecutionResult>;
|
||||
testEnvironment(ctx: AdapterEnvironmentTestContext): Promise<AdapterEnvironmentTestResult>;
|
||||
sessionCodec?: AdapterSessionCodec;
|
||||
supportsLocalAgentJwt?: boolean;
|
||||
models?: { id: string; label: string }[];
|
||||
agentConfigurationDoc?: string;
|
||||
}
|
||||
|
||||
// UI — registered in ui/src/adapters/registry.ts
|
||||
interface UIAdapterModule {
|
||||
type: string;
|
||||
label: string;
|
||||
parseStdoutLine: (line: string, ts: string) => TranscriptEntry[];
|
||||
ConfigFields: ComponentType<AdapterConfigFieldsProps>;
|
||||
buildAdapterConfig: (values: CreateConfigValues) => Record<string, unknown>;
|
||||
}
|
||||
|
||||
// CLI — registered in cli/src/adapters/registry.ts
|
||||
interface CLIAdapterModule {
|
||||
type: string;
|
||||
formatStdoutEvent: (line: string, debug: boolean) => void;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2.1 Adapter Environment Test Contract
|
||||
|
||||
Every server adapter must implement `testEnvironment(...)`. This powers the board UI "Test environment" button in agent configuration.
|
||||
|
||||
```ts
|
||||
type AdapterEnvironmentCheckLevel = "info" | "warn" | "error";
|
||||
type AdapterEnvironmentTestStatus = "pass" | "warn" | "fail";
|
||||
|
||||
interface AdapterEnvironmentCheck {
|
||||
code: string;
|
||||
level: AdapterEnvironmentCheckLevel;
|
||||
message: string;
|
||||
detail?: string | null;
|
||||
hint?: string | null;
|
||||
}
|
||||
|
||||
interface AdapterEnvironmentTestResult {
|
||||
adapterType: string;
|
||||
status: AdapterEnvironmentTestStatus;
|
||||
checks: AdapterEnvironmentCheck[];
|
||||
testedAt: string; // ISO timestamp
|
||||
}
|
||||
|
||||
interface AdapterEnvironmentTestContext {
|
||||
companyId: string;
|
||||
adapterType: string;
|
||||
config: Record<string, unknown>; // runtime-resolved adapterConfig
|
||||
}
|
||||
```
|
||||
|
||||
Guidelines:
|
||||
|
||||
- Return structured diagnostics, never throw for expected findings.
|
||||
- Use `error` for invalid/unusable runtime setup (bad cwd, missing command, invalid URL).
|
||||
- Use `warn` for non-blocking but important situations.
|
||||
- Use `info` for successful checks and context.
|
||||
|
||||
Severity policy is product-critical: warnings are not save blockers.
|
||||
Example: for `claude_local`, detected `ANTHROPIC_API_KEY` must be a `warn`, not an `error`, because Claude can still run (it just uses API-key auth instead of subscription auth).
|
||||
|
||||
---
|
||||
|
||||
## 3. Step-by-Step: Creating a New Adapter
|
||||
|
||||
### 3.1 Create the Package
|
||||
|
||||
```
|
||||
packages/adapters/<name>/
|
||||
package.json
|
||||
tsconfig.json
|
||||
src/
|
||||
index.ts
|
||||
server/index.ts
|
||||
server/execute.ts
|
||||
server/parse.ts
|
||||
ui/index.ts
|
||||
ui/parse-stdout.ts
|
||||
ui/build-config.ts
|
||||
cli/index.ts
|
||||
cli/format-event.ts
|
||||
```
|
||||
|
||||
**package.json** — must use the four-export convention:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "@paperclipai/adapter-<name>",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": "./src/index.ts",
|
||||
"./server": "./src/server/index.ts",
|
||||
"./ui": "./src/ui/index.ts",
|
||||
"./cli": "./src/cli/index.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@paperclipai/adapter-utils": "workspace:*",
|
||||
"picocolors": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.7.3"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3.2 Root `index.ts` — Adapter Metadata
|
||||
|
||||
This file is imported by **all three** consumers (server, UI, CLI). Keep it dependency-free (no Node APIs, no React).
|
||||
|
||||
```ts
|
||||
export const type = "my_agent"; // snake_case, globally unique
|
||||
export const label = "My Agent (local)";
|
||||
|
||||
export const models = [
|
||||
{ id: "model-a", label: "Model A" },
|
||||
{ id: "model-b", label: "Model B" },
|
||||
];
|
||||
|
||||
export const agentConfigurationDoc = `# my_agent agent configuration
|
||||
...document all config fields here...
|
||||
`;
|
||||
```
|
||||
|
||||
**Required exports:**
|
||||
- `type` — the adapter type key, stored in `agents.adapter_type`
|
||||
- `label` — human-readable name for the UI
|
||||
- `models` — available model options for the agent creation form
|
||||
- `agentConfigurationDoc` — markdown describing all `adapterConfig` fields (used by LLM agents configuring other agents)
|
||||
|
||||
**Writing `agentConfigurationDoc` as routing logic:**
|
||||
|
||||
The `agentConfigurationDoc` is read by LLM agents (including Paperclip agents that create other agents). Write it as **routing logic**, not marketing copy. Include concrete "use when" and "don't use when" guidance so an LLM can decide whether this adapter is appropriate for a given task.
|
||||
|
||||
```ts
|
||||
export const agentConfigurationDoc = `# my_agent agent configuration
|
||||
|
||||
Adapter: my_agent
|
||||
|
||||
Use when:
|
||||
- The agent needs to run MyAgent CLI locally on the host machine
|
||||
- You need session persistence across runs (MyAgent supports thread resumption)
|
||||
- The task requires MyAgent-specific tools (e.g. web search, code execution)
|
||||
|
||||
Don't use when:
|
||||
- You need a simple one-shot script execution (use the "process" adapter instead)
|
||||
- The agent doesn't need conversational context between runs (process adapter is simpler)
|
||||
- MyAgent CLI is not installed on the host
|
||||
|
||||
Core fields:
|
||||
- cwd (string, required): absolute working directory for the agent process
|
||||
...
|
||||
`;
|
||||
```
|
||||
|
||||
Adding explicit negative cases improves adapter selection accuracy. One concrete anti-pattern is worth more than three paragraphs of description.
|
||||
|
||||
### 3.3 Server Module
|
||||
|
||||
#### `server/execute.ts` — The Core
|
||||
|
||||
This is the most important file. It receives an `AdapterExecutionContext` and must return an `AdapterExecutionResult`.
|
||||
|
||||
**Required behavior:**
|
||||
|
||||
1. **Read config** — extract typed values from `ctx.config` using helpers (`asString`, `asNumber`, `asBoolean`, `asStringArray`, `parseObject` from `@paperclipai/adapter-utils/server-utils`)
|
||||
2. **Build environment** — call `buildPaperclipEnv(agent)` then layer in `PAPERCLIP_RUN_ID`, context vars (`PAPERCLIP_TASK_ID`, `PAPERCLIP_WAKE_REASON`, `PAPERCLIP_WAKE_COMMENT_ID`, `PAPERCLIP_APPROVAL_ID`, `PAPERCLIP_APPROVAL_STATUS`, `PAPERCLIP_LINKED_ISSUE_IDS`), user env overrides, and auth token
|
||||
3. **Resolve session** — check `runtime.sessionParams` / `runtime.sessionId` for an existing session; validate it's compatible (e.g. same cwd); decide whether to resume or start fresh
|
||||
4. **Render prompt** — use `renderTemplate(template, data)` with the template variables: `agentId`, `companyId`, `runId`, `company`, `agent`, `run`, `context`
|
||||
5. **Call onMeta** — emit adapter invocation metadata before spawning the process
|
||||
6. **Spawn the process** — use `runChildProcess()` for CLI-based agents or `fetch()` for HTTP-based agents
|
||||
7. **Parse output** — convert the agent's stdout into structured data (session id, usage, summary, errors)
|
||||
8. **Handle session errors** — if resume fails with "unknown session", retry with a fresh session and set `clearSession: true`
|
||||
9. **Return AdapterExecutionResult** — populate all fields the agent runtime supports
|
||||
|
||||
**Environment variables the server always injects:**
|
||||
|
||||
| Variable | Source |
|
||||
|----------|--------|
|
||||
| `PAPERCLIP_AGENT_ID` | `agent.id` |
|
||||
| `PAPERCLIP_COMPANY_ID` | `agent.companyId` |
|
||||
| `PAPERCLIP_API_URL` | Server's own URL |
|
||||
| `PAPERCLIP_RUN_ID` | Current run id |
|
||||
| `PAPERCLIP_TASK_ID` | `context.taskId` or `context.issueId` |
|
||||
| `PAPERCLIP_WAKE_REASON` | `context.wakeReason` |
|
||||
| `PAPERCLIP_WAKE_COMMENT_ID` | `context.wakeCommentId` or `context.commentId` |
|
||||
| `PAPERCLIP_APPROVAL_ID` | `context.approvalId` |
|
||||
| `PAPERCLIP_APPROVAL_STATUS` | `context.approvalStatus` |
|
||||
| `PAPERCLIP_LINKED_ISSUE_IDS` | `context.issueIds` (comma-separated) |
|
||||
| `PAPERCLIP_API_KEY` | `authToken` (if no explicit key in config) |
|
||||
|
||||
#### `server/parse.ts` — Output Parser
|
||||
|
||||
Parse the agent's stdout format into structured data. Must handle:
|
||||
|
||||
- **Session identification** — extract session/thread ID from init events
|
||||
- **Usage tracking** — extract token counts (input, output, cached)
|
||||
- **Cost tracking** — extract cost if available
|
||||
- **Summary extraction** — pull the agent's final text response
|
||||
- **Error detection** — identify error states, extract error messages
|
||||
- **Unknown session detection** — export an `is<Agent>UnknownSessionError()` function for retry logic
|
||||
|
||||
**Treat agent output as untrusted.** The stdout you're parsing comes from an LLM-driven process that may have executed arbitrary tool calls, fetched external content, or been influenced by prompt injection in the files it read. Parse defensively:
|
||||
- Never `eval()` or dynamically execute anything from output
|
||||
- Use safe extraction helpers (`asString`, `asNumber`, `parseJson`) — they return fallbacks on unexpected types
|
||||
- Validate session IDs and other structured data before passing them through
|
||||
- If output contains URLs, file paths, or commands, do not act on them in the adapter — just record them
|
||||
|
||||
#### `server/index.ts` — Server Exports
|
||||
|
||||
```ts
|
||||
export { execute } from "./execute.js";
|
||||
export { testEnvironment } from "./test.js";
|
||||
export { parseMyAgentOutput, isMyAgentUnknownSessionError } from "./parse.js";
|
||||
|
||||
// Session codec — required for session persistence
|
||||
export const sessionCodec: AdapterSessionCodec = {
|
||||
deserialize(raw) { /* raw DB JSON -> typed params or null */ },
|
||||
serialize(params) { /* typed params -> JSON for DB storage */ },
|
||||
getDisplayId(params) { /* -> human-readable session id string */ },
|
||||
};
|
||||
```
|
||||
|
||||
#### `server/test.ts` — Environment Diagnostics
|
||||
|
||||
Implement adapter-specific preflight checks used by the UI test button.
|
||||
|
||||
Minimum expectations:
|
||||
|
||||
1. Validate required config primitives (paths, commands, URLs, auth assumptions)
|
||||
2. Return check objects with deterministic `code` values
|
||||
3. Map severity consistently (`info` / `warn` / `error`)
|
||||
4. Compute final status:
|
||||
- `fail` if any `error`
|
||||
- `warn` if no errors and at least one warning
|
||||
- `pass` otherwise
|
||||
|
||||
This operation should be lightweight and side-effect free.
|
||||
|
||||
### 3.4 UI Module
|
||||
|
||||
#### `ui/parse-stdout.ts` — Transcript Parser
|
||||
|
||||
Converts individual stdout lines into `TranscriptEntry[]` for the run detail viewer. Must handle the agent's streaming output format and produce entries of these kinds:
|
||||
|
||||
- `init` — model/session initialization
|
||||
- `assistant` — agent text responses
|
||||
- `thinking` — agent thinking/reasoning (if supported)
|
||||
- `tool_call` — tool invocations with name and input
|
||||
- `tool_result` — tool results with content and error flag
|
||||
- `user` — user messages in the conversation
|
||||
- `result` — final result with usage stats
|
||||
- `stdout` — fallback for unparseable lines
|
||||
|
||||
```ts
|
||||
export function parseMyAgentStdoutLine(line: string, ts: string): TranscriptEntry[] {
|
||||
// Parse JSON line, map to appropriate TranscriptEntry kind(s)
|
||||
// Return [{ kind: "stdout", ts, text: line }] as fallback
|
||||
}
|
||||
```
|
||||
|
||||
#### `ui/build-config.ts` — Config Builder
|
||||
|
||||
Converts the UI form's `CreateConfigValues` into the `adapterConfig` JSON blob stored on the agent.
|
||||
|
||||
```ts
|
||||
export function buildMyAgentConfig(v: CreateConfigValues): Record<string, unknown> {
|
||||
const ac: Record<string, unknown> = {};
|
||||
if (v.cwd) ac.cwd = v.cwd;
|
||||
if (v.promptTemplate) ac.promptTemplate = v.promptTemplate;
|
||||
if (v.model) ac.model = v.model;
|
||||
ac.timeoutSec = 0;
|
||||
ac.graceSec = 15;
|
||||
// ... adapter-specific fields
|
||||
return ac;
|
||||
}
|
||||
```
|
||||
|
||||
#### UI Config Fields Component
|
||||
|
||||
Create `ui/src/adapters/<name>/config-fields.tsx` with a React component implementing `AdapterConfigFieldsProps`. This renders adapter-specific form fields in the agent creation/edit form.
|
||||
|
||||
Use the shared primitives from `ui/src/components/agent-config-primitives`:
|
||||
- `Field` — labeled form field wrapper
|
||||
- `ToggleField` — boolean toggle with label and hint
|
||||
- `DraftInput` — text input with draft/commit behavior
|
||||
- `DraftNumberInput` — number input with draft/commit behavior
|
||||
- `help` — standard hint text for common fields
|
||||
|
||||
The component must support both `create` mode (using `values`/`set`) and `edit` mode (using `config`/`eff`/`mark`).
|
||||
|
||||
### 3.5 CLI Module
|
||||
|
||||
#### `cli/format-event.ts` — Terminal Formatter
|
||||
|
||||
Pretty-prints stdout lines for `paperclipai run --watch`. Use `picocolors` for coloring.
|
||||
|
||||
```ts
|
||||
import pc from "picocolors";
|
||||
|
||||
export function printMyAgentStreamEvent(raw: string, debug: boolean): void {
|
||||
// Parse JSON line from agent stdout
|
||||
// Print colored output: blue for system, green for assistant, yellow for tools
|
||||
// In debug mode, print unrecognized lines in gray
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Registration Checklist
|
||||
|
||||
After creating the adapter package, register it in all three consumers:
|
||||
|
||||
### 4.1 Server Registry (`server/src/adapters/registry.ts`)
|
||||
|
||||
```ts
|
||||
import { execute as myExecute, sessionCodec as mySessionCodec } from "@paperclipai/adapter-my-agent/server";
|
||||
import { agentConfigurationDoc as myDoc, models as myModels } from "@paperclipai/adapter-my-agent";
|
||||
|
||||
const myAgentAdapter: ServerAdapterModule = {
|
||||
type: "my_agent",
|
||||
execute: myExecute,
|
||||
sessionCodec: mySessionCodec,
|
||||
models: myModels,
|
||||
supportsLocalAgentJwt: true, // true if agent can use Paperclip API
|
||||
agentConfigurationDoc: myDoc,
|
||||
};
|
||||
|
||||
// Add to the adaptersByType map
|
||||
const adaptersByType = new Map<string, ServerAdapterModule>(
|
||||
[..., myAgentAdapter].map((a) => [a.type, a]),
|
||||
);
|
||||
```
|
||||
|
||||
### 4.2 UI Registry (`ui/src/adapters/registry.ts`)
|
||||
|
||||
```ts
|
||||
import { myAgentUIAdapter } from "./my-agent";
|
||||
|
||||
const adaptersByType = new Map<string, UIAdapterModule>(
|
||||
[..., myAgentUIAdapter].map((a) => [a.type, a]),
|
||||
);
|
||||
```
|
||||
|
||||
With `ui/src/adapters/my-agent/index.ts`:
|
||||
|
||||
```ts
|
||||
import type { UIAdapterModule } from "../types";
|
||||
import { parseMyAgentStdoutLine } from "@paperclipai/adapter-my-agent/ui";
|
||||
import { MyAgentConfigFields } from "./config-fields";
|
||||
import { buildMyAgentConfig } from "@paperclipai/adapter-my-agent/ui";
|
||||
|
||||
export const myAgentUIAdapter: UIAdapterModule = {
|
||||
type: "my_agent",
|
||||
label: "My Agent",
|
||||
parseStdoutLine: parseMyAgentStdoutLine,
|
||||
ConfigFields: MyAgentConfigFields,
|
||||
buildAdapterConfig: buildMyAgentConfig,
|
||||
};
|
||||
```
|
||||
|
||||
### 4.3 CLI Registry (`cli/src/adapters/registry.ts`)
|
||||
|
||||
```ts
|
||||
import { printMyAgentStreamEvent } from "@paperclipai/adapter-my-agent/cli";
|
||||
|
||||
const myAgentCLIAdapter: CLIAdapterModule = {
|
||||
type: "my_agent",
|
||||
formatStdoutEvent: printMyAgentStreamEvent,
|
||||
};
|
||||
|
||||
// Add to the adaptersByType map
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Session Management — Designing for Long Runs
|
||||
|
||||
Sessions allow agents to maintain conversation context across runs. The system is **codec-based** — each adapter defines how to serialize/deserialize its session state.
|
||||
|
||||
**Design for long runs from the start.** Treat session reuse as the default primitive, not an optimization to add later. An agent working on an issue may be woken dozens of times — for the initial assignment, approval callbacks, re-assignments, manual nudges. Each wake should resume the existing conversation so the agent retains full context about what it has already done, what files it has read, and what decisions it has made. Starting fresh each time wastes tokens on re-reading the same files and risks contradictory decisions.
|
||||
|
||||
**Key concepts:**
|
||||
- `sessionParams` is an opaque `Record<string, unknown>` stored in the DB per task
|
||||
- The adapter's `sessionCodec.serialize()` converts execution result data to storable params
|
||||
- `sessionCodec.deserialize()` converts stored params back for the next run
|
||||
- `sessionCodec.getDisplayId()` extracts a human-readable session ID for the UI
|
||||
- **cwd-aware resume**: if the session was created in a different cwd than the current config, skip resuming (prevents cross-project session contamination)
|
||||
- **Unknown session retry**: if resume fails with a "session not found" error, retry with a fresh session and return `clearSession: true` so Paperclip wipes the stale session
|
||||
|
||||
If the agent runtime supports any form of context compaction or conversation compression (e.g. Claude Code's automatic context management, or Codex's `previous_response_id` chaining), lean on it. Adapters that support session resume get compaction for free — the agent runtime handles context window management internally across resumes.
|
||||
|
||||
**Pattern** (from both claude-local and codex-local):
|
||||
|
||||
```ts
|
||||
const canResumeSession =
|
||||
runtimeSessionId.length > 0 &&
|
||||
(runtimeSessionCwd.length === 0 || path.resolve(runtimeSessionCwd) === path.resolve(cwd));
|
||||
const sessionId = canResumeSession ? runtimeSessionId : null;
|
||||
|
||||
// ... run attempt ...
|
||||
|
||||
// If resume failed with unknown session, retry fresh
|
||||
if (sessionId && !proc.timedOut && exitCode !== 0 && isUnknownSessionError(output)) {
|
||||
const retry = await runAttempt(null);
|
||||
return toResult(retry, { clearSessionOnMissingSession: true });
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Server-Utils Helpers
|
||||
|
||||
Import from `@paperclipai/adapter-utils/server-utils`:
|
||||
|
||||
| Helper | Purpose |
|
||||
|--------|---------|
|
||||
| `asString(val, fallback)` | Safe string extraction |
|
||||
| `asNumber(val, fallback)` | Safe number extraction |
|
||||
| `asBoolean(val, fallback)` | Safe boolean extraction |
|
||||
| `asStringArray(val)` | Safe string array extraction |
|
||||
| `parseObject(val)` | Safe `Record<string, unknown>` extraction |
|
||||
| `parseJson(str)` | Safe JSON.parse returning `Record` or null |
|
||||
| `renderTemplate(tmpl, data)` | `{{path.to.value}}` template rendering |
|
||||
| `buildPaperclipEnv(agent)` | Standard `PAPERCLIP_*` env vars |
|
||||
| `redactEnvForLogs(env)` | Redact sensitive keys for onMeta |
|
||||
| `ensureAbsoluteDirectory(cwd)` | Validate cwd exists and is absolute |
|
||||
| `ensureCommandResolvable(cmd, cwd, env)` | Validate command is in PATH |
|
||||
| `ensurePathInEnv(env)` | Ensure PATH exists in env |
|
||||
| `runChildProcess(runId, cmd, args, opts)` | Spawn with timeout, logging, capture |
|
||||
|
||||
---
|
||||
|
||||
## 7. Conventions and Patterns
|
||||
|
||||
### Naming
|
||||
- Adapter type: `snake_case` (e.g. `claude_local`, `codex_local`)
|
||||
- Package name: `@paperclipai/adapter-<kebab-name>`
|
||||
- Package directory: `packages/adapters/<kebab-name>/`
|
||||
|
||||
### Config Parsing
|
||||
- Never trust `config` values directly — always use `asString`, `asNumber`, etc.
|
||||
- Provide sensible defaults for every optional field
|
||||
- Document all fields in `agentConfigurationDoc`
|
||||
|
||||
### Prompt Templates
|
||||
- Support `promptTemplate` for every run
|
||||
- Use `renderTemplate()` with the standard variable set
|
||||
- Default prompt: `"You are agent {{agent.id}} ({{agent.name}}). Continue your Paperclip work."`
|
||||
|
||||
### Error Handling
|
||||
- Differentiate timeout vs process error vs parse failure
|
||||
- Always populate `errorMessage` on failure
|
||||
- Include raw stdout/stderr in `resultJson` when parsing fails
|
||||
- Handle the agent CLI not being installed (command not found)
|
||||
|
||||
### Logging
|
||||
- Call `onLog("stdout", ...)` and `onLog("stderr", ...)` for all process output — this feeds the real-time run viewer
|
||||
- Call `onMeta(...)` before spawning to record invocation details
|
||||
- Use `redactEnvForLogs()` when including env in meta
|
||||
|
||||
### Paperclip Skills Injection
|
||||
|
||||
Paperclip ships shared skills (in the repo's top-level `skills/` directory) that agents need at runtime — things like the `paperclip` API skill and the `paperclip-create-agent` workflow skill. Each adapter is responsible for making these skills discoverable by its agent runtime **without polluting the agent's working directory**.
|
||||
|
||||
**The constraint:** never copy or symlink skills into the agent's `cwd`. The cwd is the user's project checkout — writing `.claude/skills/` or any other files into it would contaminate the repo with Paperclip internals, break git status, and potentially leak into commits.
|
||||
|
||||
**The pattern:** create a clean, isolated location for skills and tell the agent runtime to look there.
|
||||
|
||||
**How claude-local does it:**
|
||||
|
||||
1. At execution time, create a fresh tmpdir: `mkdtemp("paperclip-skills-")`
|
||||
2. Inside it, create `.claude/skills/` (the directory structure Claude Code expects)
|
||||
3. Symlink each skill directory from the repo's `skills/` into the tmpdir's `.claude/skills/`
|
||||
4. Pass the tmpdir to Claude Code via `--add-dir <tmpdir>` — this makes Claude Code discover the skills as if they were registered in that directory, without touching the agent's actual cwd
|
||||
5. Clean up the tmpdir in a `finally` block after the run completes
|
||||
|
||||
```ts
|
||||
// From claude-local execute.ts
|
||||
async function buildSkillsDir(): Promise<string> {
|
||||
const tmp = await fs.mkdtemp(path.join(os.tmpdir(), "paperclip-skills-"));
|
||||
const target = path.join(tmp, ".claude", "skills");
|
||||
await fs.mkdir(target, { recursive: true });
|
||||
const entries = await fs.readdir(PAPERCLIP_SKILLS_DIR, { withFileTypes: true });
|
||||
for (const entry of entries) {
|
||||
if (entry.isDirectory()) {
|
||||
await fs.symlink(
|
||||
path.join(PAPERCLIP_SKILLS_DIR, entry.name),
|
||||
path.join(target, entry.name),
|
||||
);
|
||||
}
|
||||
}
|
||||
return tmp;
|
||||
}
|
||||
|
||||
// In execute(): pass --add-dir to Claude Code
|
||||
const skillsDir = await buildSkillsDir();
|
||||
args.push("--add-dir", skillsDir);
|
||||
// ... run process ...
|
||||
// In finally: fs.rm(skillsDir, { recursive: true, force: true })
|
||||
```
|
||||
|
||||
**How codex-local does it:**
|
||||
|
||||
Codex has a global personal skills directory (`$CODEX_HOME/skills` or `~/.codex/skills`). The adapter symlinks Paperclip skills there if they don't already exist. This is acceptable because it's the agent tool's own config directory, not the user's project.
|
||||
|
||||
```ts
|
||||
// From codex-local execute.ts
|
||||
async function ensureCodexSkillsInjected(onLog) {
|
||||
const skillsHome = path.join(codexHomeDir(), "skills");
|
||||
await fs.mkdir(skillsHome, { recursive: true });
|
||||
for (const entry of entries) {
|
||||
const target = path.join(skillsHome, entry.name);
|
||||
const existing = await fs.lstat(target).catch(() => null);
|
||||
if (existing) continue; // Don't overwrite user's own skills
|
||||
await fs.symlink(source, target);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**For a new adapter:** figure out how your agent runtime discovers skills/plugins, then choose the cleanest injection path:
|
||||
|
||||
1. **Best: tmpdir + flag** (like claude-local) — if the runtime supports an "additional directory" flag, create a tmpdir, symlink skills in, pass the flag, clean up after. Zero side effects.
|
||||
2. **Acceptable: global config dir** (like codex-local) — if the runtime has a global skills/plugins directory separate from the project, symlink there. Skip existing entries to avoid overwriting user customizations.
|
||||
3. **Acceptable: env var** — if the runtime reads a skills/plugin path from an environment variable, point it at the repo's `skills/` directory directly.
|
||||
4. **Last resort: prompt injection** — if the runtime has no plugin system, include skill content in the prompt template itself. This uses tokens but avoids filesystem side effects entirely.
|
||||
|
||||
**Skills as loaded procedures, not prompt bloat.** The Paperclip skills (like `paperclip` and `paperclip-create-agent`) are designed as on-demand procedures: the agent sees skill metadata (name + description) in its context, but only loads the full SKILL.md content when it decides to invoke a skill. This keeps the base prompt small. When writing `agentConfigurationDoc` or prompt templates for your adapter, do not inline skill content — let the agent runtime's skill discovery do the work. The descriptions in each SKILL.md frontmatter act as routing logic: they tell the agent when to load the full skill, not what the skill contains.
|
||||
|
||||
**Explicit vs. fuzzy skill invocation.** For production workflows where reliability matters (e.g. an agent that must always call the Paperclip API to report status), use explicit instructions in the prompt template: "Use the paperclip skill to report your progress." Fuzzy routing (letting the model decide based on description matching) is fine for exploratory tasks but unreliable for mandatory procedures.
|
||||
|
||||
---
|
||||
|
||||
## 8. Security Considerations
|
||||
|
||||
Adapters sit at the boundary between Paperclip's orchestration layer and arbitrary agent execution. This is a high-risk surface.
|
||||
|
||||
### Treat Agent Output as Untrusted
|
||||
|
||||
The agent process runs LLM-driven code that reads external files, fetches URLs, and executes tools. Its output may be influenced by prompt injection from the content it processes. The adapter's parse layer is a trust boundary — validate everything, execute nothing.
|
||||
|
||||
### Secret Injection via Environment, Not Prompts
|
||||
|
||||
Never put secrets (API keys, tokens) into prompt templates or config fields that flow through the LLM. Instead, inject them as environment variables that the agent's tools can read directly:
|
||||
|
||||
- `PAPERCLIP_API_KEY` is injected by the server into the process environment, not the prompt
|
||||
- User-provided secrets in `config.env` are passed as env vars, redacted in `onMeta` logs
|
||||
- The `redactEnvForLogs()` helper automatically masks any key matching `/(key|token|secret|password|authorization|cookie)/i`
|
||||
|
||||
This follows the "sidecar injection" pattern: the model never sees the real secret value, but the tools it invokes can read it from the environment.
|
||||
|
||||
### Network Access
|
||||
|
||||
If your agent runtime supports network access controls (sandboxing, allowlists), configure them in the adapter:
|
||||
|
||||
- Prefer minimal allowlists over open internet access. An agent that only needs to call the Paperclip API and GitHub should not have access to arbitrary hosts.
|
||||
- Skills + network = amplified risk. A skill that teaches the agent to make HTTP requests combined with unrestricted network access creates an exfiltration path. Constrain one or the other.
|
||||
- If the runtime supports layered policies (org-level defaults + per-request overrides), wire the org-level policy into the adapter config and let per-agent config narrow further.
|
||||
|
||||
### Process Isolation
|
||||
|
||||
- CLI-based adapters inherit the server's user permissions. The `cwd` and `env` config determine what the agent process can access on the filesystem.
|
||||
- `dangerouslySkipPermissions` / `dangerouslyBypassApprovalsAndSandbox` flags exist for development convenience but must be documented as dangerous in `agentConfigurationDoc`. Production deployments should not use them.
|
||||
- Timeout and grace period (`timeoutSec`, `graceSec`) are safety rails — always enforce them. A runaway agent process without a timeout can consume unbounded resources.
|
||||
|
||||
---
|
||||
|
||||
## 9. TranscriptEntry Kinds Reference
|
||||
|
||||
The UI run viewer displays these entry kinds:
|
||||
|
||||
| Kind | Fields | Usage |
|
||||
|------|--------|-------|
|
||||
| `init` | `model`, `sessionId` | Agent initialization |
|
||||
| `assistant` | `text` | Agent text response |
|
||||
| `thinking` | `text` | Agent reasoning/thinking |
|
||||
| `user` | `text` | User message |
|
||||
| `tool_call` | `name`, `input` | Tool invocation |
|
||||
| `tool_result` | `toolUseId`, `content`, `isError` | Tool result |
|
||||
| `result` | `text`, `inputTokens`, `outputTokens`, `cachedTokens`, `costUsd`, `subtype`, `isError`, `errors` | Final result with usage |
|
||||
| `stderr` | `text` | Stderr output |
|
||||
| `system` | `text` | System messages |
|
||||
| `stdout` | `text` | Raw stdout fallback |
|
||||
|
||||
---
|
||||
|
||||
## 10. Testing
|
||||
|
||||
Create tests in `server/src/__tests__/<adapter-name>-adapter.test.ts`. Test:
|
||||
|
||||
1. **Output parsing** — feed sample stdout through your parser, verify structured output
|
||||
2. **Unknown session detection** — verify the `is<Agent>UnknownSessionError` function
|
||||
3. **Config building** — verify `buildConfig` produces correct adapterConfig from form values
|
||||
4. **Session codec** — verify serialize/deserialize round-trips
|
||||
|
||||
---
|
||||
|
||||
## 11. Minimal Adapter Checklist
|
||||
|
||||
- [ ] `packages/adapters/<name>/package.json` with four exports (`.`, `./server`, `./ui`, `./cli`)
|
||||
- [ ] Root `index.ts` with `type`, `label`, `models`, `agentConfigurationDoc`
|
||||
- [ ] `server/execute.ts` implementing `AdapterExecutionContext -> AdapterExecutionResult`
|
||||
- [ ] `server/test.ts` implementing `AdapterEnvironmentTestContext -> AdapterEnvironmentTestResult`
|
||||
- [ ] `server/parse.ts` with output parser and unknown-session detector
|
||||
- [ ] `server/index.ts` exporting `execute`, `testEnvironment`, `sessionCodec`, parse helpers
|
||||
- [ ] `ui/parse-stdout.ts` with `StdoutLineParser` for the run viewer
|
||||
- [ ] `ui/build-config.ts` with `CreateConfigValues -> adapterConfig` builder
|
||||
- [ ] `ui/src/adapters/<name>/config-fields.tsx` React component for agent form
|
||||
- [ ] `ui/src/adapters/<name>/index.ts` assembling the `UIAdapterModule`
|
||||
- [ ] `cli/format-event.ts` with terminal formatter
|
||||
- [ ] `cli/index.ts` exporting the formatter
|
||||
- [ ] Registered in `server/src/adapters/registry.ts`
|
||||
- [ ] Registered in `ui/src/adapters/registry.ts`
|
||||
- [ ] Registered in `cli/src/adapters/registry.ts`
|
||||
- [ ] Added to workspace in root `pnpm-workspace.yaml` (if not already covered by glob)
|
||||
- [ ] Tests for parsing, session codec, and config building
|
||||
@@ -1,118 +0,0 @@
|
||||
---
|
||||
name: critique
|
||||
description: Evaluate design effectiveness from a UX perspective. Assesses visual hierarchy, information architecture, emotional resonance, and overall design quality with actionable feedback.
|
||||
user-invokable: true
|
||||
args:
|
||||
- name: area
|
||||
description: The feature or area to critique (optional)
|
||||
required: false
|
||||
---
|
||||
|
||||
Conduct a holistic design critique, evaluating whether the interface actually works—not just technically, but as a designed experience. Think like a design director giving feedback.
|
||||
|
||||
**First**: Use the frontend-design skill for design principles and anti-patterns.
|
||||
|
||||
## Design Critique
|
||||
|
||||
Evaluate the interface across these dimensions:
|
||||
|
||||
### 1. AI Slop Detection (CRITICAL)
|
||||
|
||||
**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025?
|
||||
|
||||
Review the design against ALL the **DON'T** guidelines in the frontend-design skill—they are the fingerprints of AI-generated work. Check for the AI color palette, gradient text, dark mode with glowing accents, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells.
|
||||
|
||||
**The test**: If you showed this to someone and said "AI made this," would they believe you immediately? If yes, that's the problem.
|
||||
|
||||
### 2. Visual Hierarchy
|
||||
- Does the eye flow to the most important element first?
|
||||
- Is there a clear primary action? Can you spot it in 2 seconds?
|
||||
- Do size, color, and position communicate importance correctly?
|
||||
- Is there visual competition between elements that should have different weights?
|
||||
|
||||
### 3. Information Architecture
|
||||
- Is the structure intuitive? Would a new user understand the organization?
|
||||
- Is related content grouped logically?
|
||||
- Are there too many choices at once? (cognitive overload)
|
||||
- Is the navigation clear and predictable?
|
||||
|
||||
### 4. Emotional Resonance
|
||||
- What emotion does this interface evoke? Is that intentional?
|
||||
- Does it match the brand personality?
|
||||
- Does it feel trustworthy, approachable, premium, playful—whatever it should feel?
|
||||
- Would the target user feel "this is for me"?
|
||||
|
||||
### 5. Discoverability & Affordance
|
||||
- Are interactive elements obviously interactive?
|
||||
- Would a user know what to do without instructions?
|
||||
- Are hover/focus states providing useful feedback?
|
||||
- Are there hidden features that should be more visible?
|
||||
|
||||
### 6. Composition & Balance
|
||||
- Does the layout feel balanced or uncomfortably weighted?
|
||||
- Is whitespace used intentionally or just leftover?
|
||||
- Is there visual rhythm in spacing and repetition?
|
||||
- Does asymmetry feel designed or accidental?
|
||||
|
||||
### 7. Typography as Communication
|
||||
- Does the type hierarchy clearly signal what to read first, second, third?
|
||||
- Is body text comfortable to read? (line length, spacing, size)
|
||||
- Do font choices reinforce the brand/tone?
|
||||
- Is there enough contrast between heading levels?
|
||||
|
||||
### 8. Color with Purpose
|
||||
- Is color used to communicate, not just decorate?
|
||||
- Does the palette feel cohesive?
|
||||
- Are accent colors drawing attention to the right things?
|
||||
- Does it work for colorblind users? (not just technically—does meaning still come through?)
|
||||
|
||||
### 9. States & Edge Cases
|
||||
- Empty states: Do they guide users toward action, or just say "nothing here"?
|
||||
- Loading states: Do they reduce perceived wait time?
|
||||
- Error states: Are they helpful and non-blaming?
|
||||
- Success states: Do they confirm and guide next steps?
|
||||
|
||||
### 10. Microcopy & Voice
|
||||
- Is the writing clear and concise?
|
||||
- Does it sound like a human (the right human for this brand)?
|
||||
- Are labels and buttons unambiguous?
|
||||
- Does error copy help users fix the problem?
|
||||
|
||||
## Generate Critique Report
|
||||
|
||||
Structure your feedback as a design director would:
|
||||
|
||||
### Anti-Patterns Verdict
|
||||
**Start here.** Pass/fail: Does this look AI-generated? List specific tells from the skill's Anti-Patterns section. Be brutally honest.
|
||||
|
||||
### Overall Impression
|
||||
A brief gut reaction—what works, what doesn't, and the single biggest opportunity.
|
||||
|
||||
### What's Working
|
||||
Highlight 2-3 things done well. Be specific about why they work.
|
||||
|
||||
### Priority Issues
|
||||
The 3-5 most impactful design problems, ordered by importance:
|
||||
|
||||
For each issue:
|
||||
- **What**: Name the problem clearly
|
||||
- **Why it matters**: How this hurts users or undermines goals
|
||||
- **Fix**: What to do about it (be concrete)
|
||||
- **Command**: Which command to use (prefer: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /critique, /colorize — or other installed skills you're sure exist)
|
||||
|
||||
### Minor Observations
|
||||
Quick notes on smaller issues worth addressing.
|
||||
|
||||
### Questions to Consider
|
||||
Provocative questions that might unlock better solutions:
|
||||
- "What if the primary action were more prominent?"
|
||||
- "Does this need to feel this complex?"
|
||||
- "What would a confident version of this look like?"
|
||||
|
||||
**Remember**:
|
||||
- Be direct—vague feedback wastes everyone's time
|
||||
- Be specific—"the submit button" not "some elements"
|
||||
- Say what's wrong AND why it matters to users
|
||||
- Give concrete suggestions, not just "consider exploring..."
|
||||
- Prioritize ruthlessly—if everything is important, nothing is
|
||||
- Don't soften criticism—developers need honest feedback to ship great design
|
||||
@@ -1,317 +0,0 @@
|
||||
---
|
||||
name: delight
|
||||
description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful.
|
||||
user-invokable: true
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or area to add delight to (optional)
|
||||
required: false
|
||||
---
|
||||
|
||||
Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences.
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
### Context Gathering (Do This First)
|
||||
|
||||
You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality (playful vs professional vs quirky vs elegant), and what's appropriate for the domain.
|
||||
|
||||
Attempt to gather these from the current thread or codebase.
|
||||
|
||||
1. If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and STOP and call the AskUserQuestionTool to clarify. whether you got it right.
|
||||
2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context.
|
||||
|
||||
Do NOT proceed until you have answers. Delight that's wrong for the context is worse than no delight at all.
|
||||
|
||||
### Use frontend-design skill
|
||||
|
||||
Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
|
||||
|
||||
---
|
||||
|
||||
## Assess Delight Opportunities
|
||||
|
||||
Identify where delight would enhance (not distract from) the experience:
|
||||
|
||||
1. **Find natural delight moments**:
|
||||
- **Success states**: Completed actions (save, send, publish)
|
||||
- **Empty states**: First-time experiences, onboarding
|
||||
- **Loading states**: Waiting periods that could be entertaining
|
||||
- **Achievements**: Milestones, streaks, completions
|
||||
- **Interactions**: Hover states, clicks, drags
|
||||
- **Errors**: Softening frustrating moments
|
||||
- **Easter eggs**: Hidden discoveries for curious users
|
||||
|
||||
2. **Understand the context**:
|
||||
- What's the brand personality? (Playful? Professional? Quirky? Elegant?)
|
||||
- Who's the audience? (Tech-savvy? Creative? Corporate?)
|
||||
- What's the emotional context? (Accomplishment? Exploration? Frustration?)
|
||||
- What's appropriate? (Banking app ≠ gaming app)
|
||||
|
||||
3. **Define delight strategy**:
|
||||
- **Subtle sophistication**: Refined micro-interactions (luxury brands)
|
||||
- **Playful personality**: Whimsical illustrations and copy (consumer apps)
|
||||
- **Helpful surprises**: Anticipating needs before users ask (productivity tools)
|
||||
- **Sensory richness**: Satisfying sounds, smooth animations (creative tools)
|
||||
|
||||
If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify.
|
||||
|
||||
**CRITICAL**: Delight should enhance usability, never obscure it. If users notice the delight more than accomplishing their goal, you've gone too far.
|
||||
|
||||
## Delight Principles
|
||||
|
||||
Follow these guidelines:
|
||||
|
||||
### Delight Amplifies, Never Blocks
|
||||
- Delight moments should be quick (< 1 second)
|
||||
- Never delay core functionality for delight
|
||||
- Make delight skippable or subtle
|
||||
- Respect user's time and task focus
|
||||
|
||||
### Surprise and Discovery
|
||||
- Hide delightful details for users to discover
|
||||
- Reward exploration and curiosity
|
||||
- Don't announce every delight moment
|
||||
- Let users share discoveries with others
|
||||
|
||||
### Appropriate to Context
|
||||
- Match delight to emotional moment (celebrate success, empathize with errors)
|
||||
- Respect the user's state (don't be playful during critical errors)
|
||||
- Match brand personality and audience expectations
|
||||
- Cultural sensitivity (what's delightful varies by culture)
|
||||
|
||||
### Compound Over Time
|
||||
- Delight should remain fresh with repeated use
|
||||
- Vary responses (not same animation every time)
|
||||
- Reveal deeper layers with continued use
|
||||
- Build anticipation through patterns
|
||||
|
||||
## Delight Techniques
|
||||
|
||||
Add personality and joy through these methods:
|
||||
|
||||
### Micro-interactions & Animation
|
||||
|
||||
**Button delight**:
|
||||
```css
|
||||
/* Satisfying button press */
|
||||
.button {
|
||||
transition: transform 0.1s, box-shadow 0.1s;
|
||||
}
|
||||
.button:active {
|
||||
transform: translateY(2px);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/* Ripple effect on click */
|
||||
/* Smooth lift on hover */
|
||||
.button:hover {
|
||||
transform: translateY(-2px);
|
||||
transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
|
||||
}
|
||||
```
|
||||
|
||||
**Loading delight**:
|
||||
- Playful loading animations (not just spinners)
|
||||
- Personality in loading messages ("Herding pixels..." "Teaching robots to dance...")
|
||||
- Progress indication with encouraging messages
|
||||
- Skeleton screens with subtle animations
|
||||
|
||||
**Success animations**:
|
||||
- Checkmark draw animation
|
||||
- Confetti burst for major achievements
|
||||
- Gentle scale + fade for confirmation
|
||||
- Satisfying sound effects (subtle)
|
||||
|
||||
**Hover surprises**:
|
||||
- Icons that animate on hover
|
||||
- Color shifts or glow effects
|
||||
- Tooltip reveals with personality
|
||||
- Cursor changes (custom cursors for branded experiences)
|
||||
|
||||
### Personality in Copy
|
||||
|
||||
**Playful error messages**:
|
||||
```
|
||||
"Error 404"
|
||||
"This page is playing hide and seek. (And winning)"
|
||||
|
||||
"Connection failed"
|
||||
"Looks like the internet took a coffee break. Want to retry?"
|
||||
```
|
||||
|
||||
**Encouraging empty states**:
|
||||
```
|
||||
"No projects"
|
||||
"Your canvas awaits. Create something amazing."
|
||||
|
||||
"No messages"
|
||||
"Inbox zero! You're crushing it today."
|
||||
```
|
||||
|
||||
**Playful labels & tooltips**:
|
||||
```
|
||||
"Delete"
|
||||
"Send to void" (for playful brand)
|
||||
|
||||
"Help"
|
||||
"Rescue me" (tooltip)
|
||||
```
|
||||
|
||||
**IMPORTANT**: Match copy personality to brand. Banks shouldn't be wacky, but they can be warm.
|
||||
|
||||
### Illustrations & Visual Personality
|
||||
|
||||
**Custom illustrations**:
|
||||
- Empty state illustrations (not stock icons)
|
||||
- Error state illustrations (friendly monsters, quirky characters)
|
||||
- Loading state illustrations (animated characters)
|
||||
- Success state illustrations (celebrations)
|
||||
|
||||
**Icon personality**:
|
||||
- Custom icon set matching brand personality
|
||||
- Animated icons (subtle motion on hover/click)
|
||||
- Illustrative icons (more detailed than generic)
|
||||
- Consistent style across all icons
|
||||
|
||||
**Background effects**:
|
||||
- Subtle particle effects
|
||||
- Gradient mesh backgrounds
|
||||
- Geometric patterns
|
||||
- Parallax depth
|
||||
- Time-of-day themes (morning vs night)
|
||||
|
||||
### Satisfying Interactions
|
||||
|
||||
**Drag and drop delight**:
|
||||
- Lift effect on drag (shadow, scale)
|
||||
- Snap animation when dropped
|
||||
- Satisfying placement sound
|
||||
- Undo toast ("Dropped in wrong place? [Undo]")
|
||||
|
||||
**Toggle switches**:
|
||||
- Smooth slide with spring physics
|
||||
- Color transition
|
||||
- Haptic feedback on mobile
|
||||
- Optional sound effect
|
||||
|
||||
**Progress & achievements**:
|
||||
- Streak counters with celebratory milestones
|
||||
- Progress bars that "celebrate" at 100%
|
||||
- Badge unlocks with animation
|
||||
- Playful stats ("You're on fire! 5 days in a row")
|
||||
|
||||
**Form interactions**:
|
||||
- Input fields that animate on focus
|
||||
- Checkboxes that bounce when checked
|
||||
- Success state that celebrates valid input
|
||||
- Auto-grow textareas
|
||||
|
||||
### Sound Design
|
||||
|
||||
**Subtle audio cues** (when appropriate):
|
||||
- Notification sounds (distinctive but not annoying)
|
||||
- Success sounds (satisfying "ding")
|
||||
- Error sounds (empathetic, not harsh)
|
||||
- Typing sounds for chat/messaging
|
||||
- Ambient background audio (very subtle)
|
||||
|
||||
**IMPORTANT**:
|
||||
- Respect system sound settings
|
||||
- Provide mute option
|
||||
- Keep volumes quiet (subtle cues, not alarms)
|
||||
- Don't play on every interaction (sound fatigue is real)
|
||||
|
||||
### Easter Eggs & Hidden Delights
|
||||
|
||||
**Discovery rewards**:
|
||||
- Konami code unlocks special theme
|
||||
- Hidden keyboard shortcuts (Cmd+K for special features)
|
||||
- Hover reveals on logos or illustrations
|
||||
- Alt text jokes on images (for screen reader users too!)
|
||||
- Console messages for developers ("Like what you see? We're hiring!")
|
||||
|
||||
**Seasonal touches**:
|
||||
- Holiday themes (subtle, tasteful)
|
||||
- Seasonal color shifts
|
||||
- Weather-based variations
|
||||
- Time-based changes (dark at night, light during day)
|
||||
|
||||
**Contextual personality**:
|
||||
- Different messages based on time of day
|
||||
- Responses to specific user actions
|
||||
- Randomized variations (not same every time)
|
||||
- Progressive reveals with continued use
|
||||
|
||||
### Loading & Waiting States
|
||||
|
||||
**Make waiting engaging**:
|
||||
- Interesting loading messages that rotate
|
||||
- Progress bars with personality
|
||||
- Mini-games during long loads
|
||||
- Fun facts or tips while waiting
|
||||
- Countdown with encouraging messages
|
||||
|
||||
```
|
||||
Loading messages rotation:
|
||||
- "Waking up the servers..."
|
||||
- "Teaching robots to dance..."
|
||||
- "Consulting the magic 8-ball..."
|
||||
- "Counting backwards from infinity..."
|
||||
```
|
||||
|
||||
### Celebration Moments
|
||||
|
||||
**Success celebrations**:
|
||||
- Confetti for major milestones
|
||||
- Animated checkmarks for completions
|
||||
- Progress bar celebrations at 100%
|
||||
- "Achievement unlocked" style notifications
|
||||
- Personalized messages ("You published your 10th article!")
|
||||
|
||||
**Milestone recognition**:
|
||||
- First-time actions get special treatment
|
||||
- Streak tracking and celebration
|
||||
- Progress toward goals
|
||||
- Anniversary celebrations
|
||||
|
||||
## Implementation Patterns
|
||||
|
||||
**Animation libraries**:
|
||||
- Framer Motion (React)
|
||||
- GSAP (universal)
|
||||
- Lottie (After Effects animations)
|
||||
- Canvas confetti (party effects)
|
||||
|
||||
**Sound libraries**:
|
||||
- Howler.js (audio management)
|
||||
- Use-sound (React hook)
|
||||
|
||||
**Physics libraries**:
|
||||
- React Spring (spring physics)
|
||||
- Popmotion (animation primitives)
|
||||
|
||||
**IMPORTANT**: File size matters. Compress images, optimize animations, lazy load delight features.
|
||||
|
||||
**NEVER**:
|
||||
- Delay core functionality for delight
|
||||
- Force users through delightful moments (make skippable)
|
||||
- Use delight to hide poor UX
|
||||
- Overdo it (less is more)
|
||||
- Ignore accessibility (animate responsibly, provide alternatives)
|
||||
- Make every interaction delightful (special moments should be special)
|
||||
- Sacrifice performance for delight
|
||||
- Be inappropriate for context (read the room)
|
||||
|
||||
## Verify Delight Quality
|
||||
|
||||
Test that delight actually delights:
|
||||
|
||||
- **User reactions**: Do users smile? Share screenshots?
|
||||
- **Doesn't annoy**: Still pleasant after 100th time?
|
||||
- **Doesn't block**: Can users opt out or skip?
|
||||
- **Performant**: No jank, no slowdown
|
||||
- **Appropriate**: Matches brand and context
|
||||
- **Accessible**: Works with reduced motion, screen readers
|
||||
|
||||
Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct.
|
||||
@@ -1,137 +0,0 @@
|
||||
---
|
||||
name: distill
|
||||
description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean.
|
||||
user-invokable: true
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or component to distill (optional)
|
||||
required: false
|
||||
---
|
||||
|
||||
Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification.
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
### Context Gathering (Do This First)
|
||||
|
||||
You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), and understanding what's truly essential vs nice-to-have for this product.
|
||||
|
||||
Attempt to gather these from the current thread or codebase.
|
||||
|
||||
1. If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and STOP and call the AskUserQuestionTool to clarify. whether you got it right.
|
||||
2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context.
|
||||
|
||||
Do NOT proceed until you have answers. Simplifying the wrong things destroys usability.
|
||||
|
||||
### Use frontend-design skill
|
||||
|
||||
Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
|
||||
|
||||
---
|
||||
|
||||
## Assess Current State
|
||||
|
||||
Analyze what makes the design feel complex or cluttered:
|
||||
|
||||
1. **Identify complexity sources**:
|
||||
- **Too many elements**: Competing buttons, redundant information, visual clutter
|
||||
- **Excessive variation**: Too many colors, fonts, sizes, styles without purpose
|
||||
- **Information overload**: Everything visible at once, no progressive disclosure
|
||||
- **Visual noise**: Unnecessary borders, shadows, backgrounds, decorations
|
||||
- **Confusing hierarchy**: Unclear what matters most
|
||||
- **Feature creep**: Too many options, actions, or paths forward
|
||||
|
||||
2. **Find the essence**:
|
||||
- What's the primary user goal? (There should be ONE)
|
||||
- What's actually necessary vs nice-to-have?
|
||||
- What can be removed, hidden, or combined?
|
||||
- What's the 20% that delivers 80% of value?
|
||||
|
||||
If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify.
|
||||
|
||||
**CRITICAL**: Simplicity is not about removing features - it's about removing obstacles between users and their goals. Every element should justify its existence.
|
||||
|
||||
## Plan Simplification
|
||||
|
||||
Create a ruthless editing strategy:
|
||||
|
||||
- **Core purpose**: What's the ONE thing this should accomplish?
|
||||
- **Essential elements**: What's truly necessary to achieve that purpose?
|
||||
- **Progressive disclosure**: What can be hidden until needed?
|
||||
- **Consolidation opportunities**: What can be combined or integrated?
|
||||
|
||||
**IMPORTANT**: Simplification is hard. It requires saying no to good ideas to make room for great execution. Be ruthless.
|
||||
|
||||
## Simplify the Design
|
||||
|
||||
Systematically remove complexity across these dimensions:
|
||||
|
||||
### Information Architecture
|
||||
- **Reduce scope**: Remove secondary actions, optional features, redundant information
|
||||
- **Progressive disclosure**: Hide complexity behind clear entry points (accordions, modals, step-through flows)
|
||||
- **Combine related actions**: Merge similar buttons, consolidate forms, group related content
|
||||
- **Clear hierarchy**: ONE primary action, few secondary actions, everything else tertiary or hidden
|
||||
- **Remove redundancy**: If it's said elsewhere, don't repeat it here
|
||||
|
||||
### Visual Simplification
|
||||
- **Reduce color palette**: Use 1-2 colors plus neutrals, not 5-7 colors
|
||||
- **Limit typography**: One font family, 3-4 sizes maximum, 2-3 weights
|
||||
- **Remove decorations**: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function
|
||||
- **Flatten structure**: Reduce nesting, remove unnecessary containers—never nest cards inside cards
|
||||
- **Remove unnecessary cards**: Cards aren't needed for basic layout; use spacing and alignment instead
|
||||
- **Consistent spacing**: Use one spacing scale, remove arbitrary gaps
|
||||
|
||||
### Layout Simplification
|
||||
- **Linear flow**: Replace complex grids with simple vertical flow where possible
|
||||
- **Remove sidebars**: Move secondary content inline or hide it
|
||||
- **Full-width**: Use available space generously instead of complex multi-column layouts
|
||||
- **Consistent alignment**: Pick left or center, stick with it
|
||||
- **Generous white space**: Let content breathe, don't pack everything tight
|
||||
|
||||
### Interaction Simplification
|
||||
- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
|
||||
- **Smart defaults**: Make common choices automatic, only ask when necessary
|
||||
- **Inline actions**: Replace modal flows with inline editing where possible
|
||||
- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
|
||||
- **Clear CTAs**: ONE obvious next step, not five competing actions
|
||||
|
||||
### Content Simplification
|
||||
- **Shorter copy**: Cut every sentence in half, then do it again
|
||||
- **Active voice**: "Save changes" not "Changes will be saved"
|
||||
- **Remove jargon**: Plain language always wins
|
||||
- **Scannable structure**: Short paragraphs, bullet points, clear headings
|
||||
- **Essential information only**: Remove marketing fluff, legalese, hedging
|
||||
- **Remove redundant copy**: No headers restating intros, no repeated explanations, say it once
|
||||
|
||||
### Code Simplification
|
||||
- **Remove unused code**: Dead CSS, unused components, orphaned files
|
||||
- **Flatten component trees**: Reduce nesting depth
|
||||
- **Consolidate styles**: Merge similar styles, use utilities consistently
|
||||
- **Reduce variants**: Does that component need 12 variations, or can 3 cover 90% of cases?
|
||||
|
||||
**NEVER**:
|
||||
- Remove necessary functionality (simplicity ≠ feature-less)
|
||||
- Sacrifice accessibility for simplicity (clear labels and ARIA still required)
|
||||
- Make things so simple they're unclear (mystery ≠ minimalism)
|
||||
- Remove information users need to make decisions
|
||||
- Eliminate hierarchy completely (some things should stand out)
|
||||
- Oversimplify complex domains (match complexity to actual task complexity)
|
||||
|
||||
## Verify Simplification
|
||||
|
||||
Ensure simplification improves usability:
|
||||
|
||||
- **Faster task completion**: Can users accomplish goals more quickly?
|
||||
- **Reduced cognitive load**: Is it easier to understand what to do?
|
||||
- **Still complete**: Are all necessary features still accessible?
|
||||
- **Clearer hierarchy**: Is it obvious what matters most?
|
||||
- **Better performance**: Does simpler design load faster?
|
||||
|
||||
## Document Removed Complexity
|
||||
|
||||
If you removed features or options:
|
||||
- Document why they were removed
|
||||
- Consider if they need alternative access points
|
||||
- Note any user feedback to monitor
|
||||
|
||||
Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away."
|
||||
@@ -1,94 +0,0 @@
|
||||
---
|
||||
name: extract
|
||||
description: Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library.
|
||||
user-invokable: true
|
||||
args:
|
||||
- name: target
|
||||
description: The feature, component, or area to extract from (optional)
|
||||
required: false
|
||||
---
|
||||
|
||||
Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse.
|
||||
|
||||
## Discover
|
||||
|
||||
Analyze the target area to identify extraction opportunities:
|
||||
|
||||
1. **Find the design system**: Locate your design system, component library, or shared UI directory (grep for "design system", "ui", "components", etc.). Understand its structure:
|
||||
- Component organization and naming conventions
|
||||
- Design token structure (if any)
|
||||
- Documentation patterns
|
||||
- Import/export conventions
|
||||
|
||||
**CRITICAL**: If no design system exists, ask before creating one. Understand the preferred location and structure first.
|
||||
|
||||
2. **Identify patterns**: Look for:
|
||||
- **Repeated components**: Similar UI patterns used multiple times (buttons, cards, inputs, etc.)
|
||||
- **Hard-coded values**: Colors, spacing, typography, shadows that should be tokens
|
||||
- **Inconsistent variations**: Multiple implementations of the same concept (3 different button styles)
|
||||
- **Reusable patterns**: Layout patterns, composition patterns, interaction patterns worth systematizing
|
||||
|
||||
3. **Assess value**: Not everything should be extracted. Consider:
|
||||
- Is this used 3+ times, or likely to be reused?
|
||||
- Would systematizing this improve consistency?
|
||||
- Is this a general pattern or context-specific?
|
||||
- What's the maintenance cost vs benefit?
|
||||
|
||||
## Plan Extraction
|
||||
|
||||
Create a systematic extraction plan:
|
||||
|
||||
- **Components to extract**: Which UI elements become reusable components?
|
||||
- **Tokens to create**: Which hard-coded values become design tokens?
|
||||
- **Variants to support**: What variations does each component need?
|
||||
- **Naming conventions**: Component names, token names, prop names that match existing patterns
|
||||
- **Migration path**: How to refactor existing uses to consume the new shared versions
|
||||
|
||||
**IMPORTANT**: Design systems grow incrementally. Extract what's clearly reusable now, not everything that might someday be reusable.
|
||||
|
||||
## Extract & Enrich
|
||||
|
||||
Build improved, reusable versions:
|
||||
|
||||
- **Components**: Create well-designed components with:
|
||||
- Clear props API with sensible defaults
|
||||
- Proper variants for different use cases
|
||||
- Accessibility built in (ARIA, keyboard navigation, focus management)
|
||||
- Documentation and usage examples
|
||||
|
||||
- **Design tokens**: Create tokens with:
|
||||
- Clear naming (primitive vs semantic)
|
||||
- Proper hierarchy and organization
|
||||
- Documentation of when to use each token
|
||||
|
||||
- **Patterns**: Document patterns with:
|
||||
- When to use this pattern
|
||||
- Code examples
|
||||
- Variations and combinations
|
||||
|
||||
**NEVER**:
|
||||
- Extract one-off, context-specific implementations without generalization
|
||||
- Create components so generic they're useless
|
||||
- Extract without considering existing design system conventions
|
||||
- Skip proper TypeScript types or prop documentation
|
||||
- Create tokens for every single value (tokens should have semantic meaning)
|
||||
|
||||
## Migrate
|
||||
|
||||
Replace existing uses with the new shared versions:
|
||||
|
||||
- **Find all instances**: Search for the patterns you've extracted
|
||||
- **Replace systematically**: Update each use to consume the shared version
|
||||
- **Test thoroughly**: Ensure visual and functional parity
|
||||
- **Delete dead code**: Remove the old implementations
|
||||
|
||||
## Document
|
||||
|
||||
Update design system documentation:
|
||||
|
||||
- Add new components to the component library
|
||||
- Document token usage and values
|
||||
- Add examples and guidelines
|
||||
- Update any Storybook or component catalog
|
||||
|
||||
Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently.
|
||||
@@ -1,127 +0,0 @@
|
||||
---
|
||||
name: frontend-design
|
||||
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications. Generates creative, polished code that avoids generic AI aesthetics.
|
||||
license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution.
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
## Design Direction
|
||||
|
||||
Commit to a BOLD aesthetic direction:
|
||||
- **Purpose**: What problem does this interface solve? Who uses it?
|
||||
- **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.
|
||||
- **Constraints**: Technical requirements (framework, performance, accessibility).
|
||||
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
|
||||
|
||||
**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work—the key is intentionality, not intensity.
|
||||
|
||||
Then implement working code that is:
|
||||
- Production-grade and functional
|
||||
- Visually striking and memorable
|
||||
- Cohesive with a clear aesthetic point-of-view
|
||||
- Meticulously refined in every detail
|
||||
|
||||
## Frontend Aesthetics Guidelines
|
||||
|
||||
### Typography
|
||||
→ *Consult [typography reference](reference/typography.md) for scales, pairing, and loading strategies.*
|
||||
|
||||
Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font.
|
||||
|
||||
**DO**: Use a modular type scale with fluid sizing (clamp)
|
||||
**DO**: Vary font weights and sizes to create clear visual hierarchy
|
||||
**DON'T**: Use overused fonts—Inter, Roboto, Arial, Open Sans, system defaults
|
||||
**DON'T**: Use monospace typography as lazy shorthand for "technical/developer" vibes
|
||||
**DON'T**: Put large icons with rounded corners above every heading—they rarely add value and make sites look templated
|
||||
|
||||
### Color & Theme
|
||||
→ *Consult [color reference](reference/color-and-contrast.md) for OKLCH, palettes, and dark mode.*
|
||||
|
||||
Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
|
||||
|
||||
**DO**: Use modern CSS color functions (oklch, color-mix, light-dark) for perceptually uniform, maintainable palettes
|
||||
**DO**: Tint your neutrals toward your brand hue—even a subtle hint creates subconscious cohesion
|
||||
**DON'T**: Use gray text on colored backgrounds—it looks washed out; use a shade of the background color instead
|
||||
**DON'T**: Use pure black (#000) or pure white (#fff)—always tint; pure black/white never appears in nature
|
||||
**DON'T**: Use the AI color palette: cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds
|
||||
**DON'T**: Use gradient text for "impact"—especially on metrics or headings; it's decorative rather than meaningful
|
||||
**DON'T**: Default to dark mode with glowing accents—it looks "cool" without requiring actual design decisions
|
||||
|
||||
### Layout & Space
|
||||
→ *Consult [spatial reference](reference/spatial-design.md) for grids, rhythm, and container queries.*
|
||||
|
||||
Create visual rhythm through varied spacing—not the same padding everywhere. Embrace asymmetry and unexpected compositions. Break the grid intentionally for emphasis.
|
||||
|
||||
**DO**: Create visual rhythm through varied spacing—tight groupings, generous separations
|
||||
**DO**: Use fluid spacing with clamp() that breathes on larger screens
|
||||
**DO**: Use asymmetry and unexpected compositions; break the grid intentionally for emphasis
|
||||
**DON'T**: Wrap everything in cards—not everything needs a container
|
||||
**DON'T**: Nest cards inside cards—visual noise, flatten the hierarchy
|
||||
**DON'T**: Use identical card grids—same-sized cards with icon + heading + text, repeated endlessly
|
||||
**DON'T**: Use the hero metric layout template—big number, small label, supporting stats, gradient accent
|
||||
**DON'T**: Center everything—left-aligned text with asymmetric layouts feels more designed
|
||||
**DON'T**: Use the same spacing everywhere—without rhythm, layouts feel monotonous
|
||||
|
||||
### Visual Details
|
||||
**DO**: Use intentional, purposeful decorative elements that reinforce brand
|
||||
**DON'T**: Use glassmorphism everywhere—blur effects, glass cards, glow borders used decoratively rather than purposefully
|
||||
**DON'T**: Use rounded elements with thick colored border on one side—a lazy accent that almost never looks intentional
|
||||
**DON'T**: Use sparklines as decoration—tiny charts that look sophisticated but convey nothing meaningful
|
||||
**DON'T**: Use rounded rectangles with generic drop shadows—safe, forgettable, could be any AI output
|
||||
**DON'T**: Use modals unless there's truly no better alternative—modals are lazy
|
||||
|
||||
### Motion
|
||||
→ *Consult [motion reference](reference/motion-design.md) for timing, easing, and reduced motion.*
|
||||
|
||||
Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.
|
||||
|
||||
**DO**: Use motion to convey state changes—entrances, exits, feedback
|
||||
**DO**: Use exponential easing (ease-out-quart/quint/expo) for natural deceleration
|
||||
**DO**: For height animations, use grid-template-rows transitions instead of animating height directly
|
||||
**DON'T**: Animate layout properties (width, height, padding, margin)—use transform and opacity only
|
||||
**DON'T**: Use bounce or elastic easing—they feel dated and tacky; real objects decelerate smoothly
|
||||
|
||||
### Interaction
|
||||
→ *Consult [interaction reference](reference/interaction-design.md) for forms, focus, and loading patterns.*
|
||||
|
||||
Make interactions feel fast. Use optimistic UI—update immediately, sync later.
|
||||
|
||||
**DO**: Use progressive disclosure—start simple, reveal sophistication through interaction (basic options first, advanced behind expandable sections; hover states that reveal secondary actions)
|
||||
**DO**: Design empty states that teach the interface, not just say "nothing here"
|
||||
**DO**: Make every interactive surface feel intentional and responsive
|
||||
**DON'T**: Repeat the same information—redundant headers, intros that restate the heading
|
||||
**DON'T**: Make every button primary—use ghost buttons, text links, secondary styles; hierarchy matters
|
||||
|
||||
### Responsive
|
||||
→ *Consult [responsive reference](reference/responsive-design.md) for mobile-first, fluid design, and container queries.*
|
||||
|
||||
**DO**: Use container queries (@container) for component-level responsiveness
|
||||
**DO**: Adapt the interface for different contexts—don't just shrink it
|
||||
**DON'T**: Hide critical functionality on mobile—adapt the interface, don't amputate it
|
||||
|
||||
### UX Writing
|
||||
→ *Consult [ux-writing reference](reference/ux-writing.md) for labels, errors, and empty states.*
|
||||
|
||||
**DO**: Make every word earn its place
|
||||
**DON'T**: Repeat information users can already see
|
||||
|
||||
---
|
||||
|
||||
## The AI Slop Test
|
||||
|
||||
**Critical quality check**: If you showed this interface to someone and said "AI made this," would they believe you immediately? If yes, that's the problem.
|
||||
|
||||
A distinctive interface should make someone ask "how was this made?" not "which AI made this?"
|
||||
|
||||
Review the DON'T guidelines above—they are the fingerprints of AI-generated work from 2024-2025.
|
||||
|
||||
---
|
||||
|
||||
## Implementation Principles
|
||||
|
||||
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.
|
||||
|
||||
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 across generations.
|
||||
|
||||
Remember: Claude is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
|
||||
@@ -1,132 +0,0 @@
|
||||
# Color & Contrast
|
||||
|
||||
## Color Spaces: Use OKLCH
|
||||
|
||||
**Stop using HSL.** Use OKLCH (or LCH) instead. It's perceptually uniform, meaning equal steps in lightness *look* equal—unlike HSL where 50% lightness in yellow looks bright while 50% in blue looks dark.
|
||||
|
||||
```css
|
||||
/* OKLCH: lightness (0-100%), chroma (0-0.4+), hue (0-360) */
|
||||
--color-primary: oklch(60% 0.15 250); /* Blue */
|
||||
--color-primary-light: oklch(85% 0.08 250); /* Same hue, lighter */
|
||||
--color-primary-dark: oklch(35% 0.12 250); /* Same hue, darker */
|
||||
```
|
||||
|
||||
**Key insight**: As you move toward white or black, reduce chroma (saturation). High chroma at extreme lightness looks garish. A light blue at 85% lightness needs ~0.08 chroma, not the 0.15 of your base color.
|
||||
|
||||
## Building Functional Palettes
|
||||
|
||||
### The Tinted Neutral Trap
|
||||
|
||||
**Pure gray is dead.** Add a subtle hint of your brand hue to all neutrals:
|
||||
|
||||
```css
|
||||
/* Dead grays */
|
||||
--gray-100: oklch(95% 0 0); /* No personality */
|
||||
--gray-900: oklch(15% 0 0);
|
||||
|
||||
/* Warm-tinted grays (add brand warmth) */
|
||||
--gray-100: oklch(95% 0.01 60); /* Hint of warmth */
|
||||
--gray-900: oklch(15% 0.01 60);
|
||||
|
||||
/* Cool-tinted grays (tech, professional) */
|
||||
--gray-100: oklch(95% 0.01 250); /* Hint of blue */
|
||||
--gray-900: oklch(15% 0.01 250);
|
||||
```
|
||||
|
||||
The chroma is tiny (0.01) but perceptible. It creates subconscious cohesion between your brand color and your UI.
|
||||
|
||||
### Palette Structure
|
||||
|
||||
A complete system needs:
|
||||
|
||||
| Role | Purpose | Example |
|
||||
|------|---------|---------|
|
||||
| **Primary** | Brand, CTAs, key actions | 1 color, 3-5 shades |
|
||||
| **Neutral** | Text, backgrounds, borders | 9-11 shade scale |
|
||||
| **Semantic** | Success, error, warning, info | 4 colors, 2-3 shades each |
|
||||
| **Surface** | Cards, modals, overlays | 2-3 elevation levels |
|
||||
|
||||
**Skip secondary/tertiary unless you need them.** Most apps work fine with one accent color. Adding more creates decision fatigue and visual noise.
|
||||
|
||||
### The 60-30-10 Rule (Applied Correctly)
|
||||
|
||||
This rule is about **visual weight**, not pixel count:
|
||||
|
||||
- **60%**: Neutral backgrounds, white space, base surfaces
|
||||
- **30%**: Secondary colors—text, borders, inactive states
|
||||
- **10%**: Accent—CTAs, highlights, focus states
|
||||
|
||||
The common mistake: using the accent color everywhere because it's "the brand color." Accent colors work *because* they're rare. Overuse kills their power.
|
||||
|
||||
## Contrast & Accessibility
|
||||
|
||||
### WCAG Requirements
|
||||
|
||||
| Content Type | AA Minimum | AAA Target |
|
||||
|--------------|------------|------------|
|
||||
| Body text | 4.5:1 | 7:1 |
|
||||
| Large text (18px+ or 14px bold) | 3:1 | 4.5:1 |
|
||||
| UI components, icons | 3:1 | 4.5:1 |
|
||||
| Non-essential decorations | None | None |
|
||||
|
||||
**The gotcha**: Placeholder text still needs 4.5:1. That light gray placeholder you see everywhere? Usually fails WCAG.
|
||||
|
||||
### Dangerous Color Combinations
|
||||
|
||||
These commonly fail contrast or cause readability issues:
|
||||
|
||||
- Light gray text on white (the #1 accessibility fail)
|
||||
- **Gray text on any colored background**—gray looks washed out and dead on color. Use a darker shade of the background color, or transparency
|
||||
- Red text on green background (or vice versa)—8% of men can't distinguish these
|
||||
- Blue text on red background (vibrates visually)
|
||||
- Yellow text on white (almost always fails)
|
||||
- Thin light text on images (unpredictable contrast)
|
||||
|
||||
### Never Use Pure Gray or Pure Black
|
||||
|
||||
Pure gray (`oklch(50% 0 0)`) and pure black (`#000`) don't exist in nature—real shadows and surfaces always have a color cast. Even a chroma of 0.005-0.01 is enough to feel natural without being obviously tinted. (See tinted neutrals example above.)
|
||||
|
||||
### Testing
|
||||
|
||||
Don't trust your eyes. Use tools:
|
||||
|
||||
- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
|
||||
- Browser DevTools → Rendering → Emulate vision deficiencies
|
||||
- [Polypane](https://polypane.app/) for real-time testing
|
||||
|
||||
## Theming: Light & Dark Mode
|
||||
|
||||
### Dark Mode Is Not Inverted Light Mode
|
||||
|
||||
You can't just swap colors. Dark mode requires different design decisions:
|
||||
|
||||
| Light Mode | Dark Mode |
|
||||
|------------|-----------|
|
||||
| Shadows for depth | Lighter surfaces for depth (no shadows) |
|
||||
| Dark text on light | Light text on dark (reduce font weight) |
|
||||
| Vibrant accents | Desaturate accents slightly |
|
||||
| White backgrounds | Never pure black—use dark gray (oklch 12-18%) |
|
||||
|
||||
```css
|
||||
/* Dark mode depth via surface color, not shadow */
|
||||
:root[data-theme="dark"] {
|
||||
--surface-1: oklch(15% 0.01 250);
|
||||
--surface-2: oklch(20% 0.01 250); /* "Higher" = lighter */
|
||||
--surface-3: oklch(25% 0.01 250);
|
||||
|
||||
/* Reduce text weight slightly */
|
||||
--body-weight: 350; /* Instead of 400 */
|
||||
}
|
||||
```
|
||||
|
||||
### Token Hierarchy
|
||||
|
||||
Use two layers: primitive tokens (`--blue-500`) and semantic tokens (`--color-primary: var(--blue-500)`). For dark mode, only redefine the semantic layer—primitives stay the same.
|
||||
|
||||
## Alpha Is A Design Smell
|
||||
|
||||
Heavy use of transparency (rgba, hsla) usually means an incomplete palette. Alpha creates unpredictable contrast, performance overhead, and inconsistency. Define explicit overlay colors for each context instead. Exception: focus rings and interactive states where see-through is needed.
|
||||
|
||||
---
|
||||
|
||||
**Avoid**: Relying on color alone to convey information. Creating palettes without clear roles for each color. Using pure black (#000) for large areas. Skipping color blindness testing (8% of men affected).
|
||||
@@ -1,123 +0,0 @@
|
||||
# Interaction Design
|
||||
|
||||
## The Eight Interactive States
|
||||
|
||||
Every interactive element needs these states designed:
|
||||
|
||||
| State | When | Visual Treatment |
|
||||
|-------|------|------------------|
|
||||
| **Default** | At rest | Base styling |
|
||||
| **Hover** | Pointer over (not touch) | Subtle lift, color shift |
|
||||
| **Focus** | Keyboard/programmatic focus | Visible ring (see below) |
|
||||
| **Active** | Being pressed | Pressed in, darker |
|
||||
| **Disabled** | Not interactive | Reduced opacity, no pointer |
|
||||
| **Loading** | Processing | Spinner, skeleton |
|
||||
| **Error** | Invalid state | Red border, icon, message |
|
||||
| **Success** | Completed | Green check, confirmation |
|
||||
|
||||
**The common miss**: Designing hover without focus, or vice versa. They're different. Keyboard users never see hover states.
|
||||
|
||||
## Focus Rings: Do Them Right
|
||||
|
||||
**Never `outline: none` without replacement.** It's an accessibility violation. Instead, use `:focus-visible` to show focus only for keyboard users:
|
||||
|
||||
```css
|
||||
/* Hide focus ring for mouse/touch */
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Show focus ring for keyboard */
|
||||
button:focus-visible {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
```
|
||||
|
||||
**Focus ring design**:
|
||||
- High contrast (3:1 minimum against adjacent colors)
|
||||
- 2-3px thick
|
||||
- Offset from element (not inside it)
|
||||
- Consistent across all interactive elements
|
||||
|
||||
## Form Design: The Non-Obvious
|
||||
|
||||
**Placeholders aren't labels**—they disappear on input. Always use visible `<label>` elements. **Validate on blur**, not on every keystroke (exception: password strength). Place errors **below** fields with `aria-describedby` connecting them.
|
||||
|
||||
## Loading States
|
||||
|
||||
**Optimistic updates**: Show success immediately, rollback on failure. Use for low-stakes actions (likes, follows), not payments or destructive actions. **Skeleton screens > spinners**—they preview content shape and feel faster than generic spinners.
|
||||
|
||||
## Modals: The Inert Approach
|
||||
|
||||
Focus trapping in modals used to require complex JavaScript. Now use the `inert` attribute:
|
||||
|
||||
```html
|
||||
<!-- When modal is open -->
|
||||
<main inert>
|
||||
<!-- Content behind modal can't be focused or clicked -->
|
||||
</main>
|
||||
<dialog open>
|
||||
<h2>Modal Title</h2>
|
||||
<!-- Focus stays inside modal -->
|
||||
</dialog>
|
||||
```
|
||||
|
||||
Or use the native `<dialog>` element:
|
||||
|
||||
```javascript
|
||||
const dialog = document.querySelector('dialog');
|
||||
dialog.showModal(); // Opens with focus trap, closes on Escape
|
||||
```
|
||||
|
||||
## The Popover API
|
||||
|
||||
For tooltips, dropdowns, and non-modal overlays, use native popovers:
|
||||
|
||||
```html
|
||||
<button popovertarget="menu">Open menu</button>
|
||||
<div id="menu" popover>
|
||||
<button>Option 1</button>
|
||||
<button>Option 2</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Benefits**: Light-dismiss (click outside closes), proper stacking, no z-index wars, accessible by default.
|
||||
|
||||
## Destructive Actions: Undo > Confirm
|
||||
|
||||
**Undo is better than confirmation dialogs**—users click through confirmations mindlessly. Remove from UI immediately, show undo toast, actually delete after toast expires. Use confirmation only for truly irreversible actions (account deletion), high-cost actions, or batch operations.
|
||||
|
||||
## Keyboard Navigation Patterns
|
||||
|
||||
### Roving Tabindex
|
||||
|
||||
For component groups (tabs, menu items, radio groups), one item is tabbable; arrow keys move within:
|
||||
|
||||
```html
|
||||
<div role="tablist">
|
||||
<button role="tab" tabindex="0">Tab 1</button>
|
||||
<button role="tab" tabindex="-1">Tab 2</button>
|
||||
<button role="tab" tabindex="-1">Tab 3</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
Arrow keys move `tabindex="0"` between items. Tab moves to the next component entirely.
|
||||
|
||||
### Skip Links
|
||||
|
||||
Provide skip links (`<a href="#main-content">Skip to main content</a>`) for keyboard users to jump past navigation. Hide off-screen, show on focus.
|
||||
|
||||
## Gesture Discoverability
|
||||
|
||||
Swipe-to-delete and similar gestures are invisible. Hint at their existence:
|
||||
|
||||
- **Partially reveal**: Show delete button peeking from edge
|
||||
- **Onboarding**: Coach marks on first use
|
||||
- **Alternative**: Always provide a visible fallback (menu with "Delete")
|
||||
|
||||
Don't rely on gestures as the only way to perform actions.
|
||||
|
||||
---
|
||||
|
||||
**Avoid**: Removing focus indicators without alternatives. Using placeholder text as labels. Touch targets <44x44px. Generic error messages. Custom controls without ARIA/keyboard support.
|
||||
@@ -1,99 +0,0 @@
|
||||
# Motion Design
|
||||
|
||||
## Duration: The 100/300/500 Rule
|
||||
|
||||
Timing matters more than easing. These durations feel right for most UI:
|
||||
|
||||
| Duration | Use Case | Examples |
|
||||
|----------|----------|----------|
|
||||
| **100-150ms** | Instant feedback | Button press, toggle, color change |
|
||||
| **200-300ms** | State changes | Menu open, tooltip, hover states |
|
||||
| **300-500ms** | Layout changes | Accordion, modal, drawer |
|
||||
| **500-800ms** | Entrance animations | Page load, hero reveals |
|
||||
|
||||
**Exit animations are faster than entrances**—use ~75% of enter duration.
|
||||
|
||||
## Easing: Pick the Right Curve
|
||||
|
||||
**Don't use `ease`.** It's a compromise that's rarely optimal. Instead:
|
||||
|
||||
| Curve | Use For | CSS |
|
||||
|-------|---------|-----|
|
||||
| **ease-out** | Elements entering | `cubic-bezier(0.16, 1, 0.3, 1)` |
|
||||
| **ease-in** | Elements leaving | `cubic-bezier(0.7, 0, 0.84, 0)` |
|
||||
| **ease-in-out** | State toggles (there → back) | `cubic-bezier(0.65, 0, 0.35, 1)` |
|
||||
|
||||
**For micro-interactions, use exponential curves**—they feel natural because they mimic real physics (friction, deceleration):
|
||||
|
||||
```css
|
||||
/* Quart out - smooth, refined (recommended default) */
|
||||
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
|
||||
|
||||
/* Quint out - slightly more dramatic */
|
||||
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
|
||||
/* Expo out - snappy, confident */
|
||||
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
```
|
||||
|
||||
**Avoid bounce and elastic curves.** They were trendy in 2015 but now feel tacky and amateurish. Real objects don't bounce when they stop—they decelerate smoothly. Overshoot effects draw attention to the animation itself rather than the content.
|
||||
|
||||
## The Only Two Properties You Should Animate
|
||||
|
||||
**transform** and **opacity** only—everything else causes layout recalculation. For height animations (accordions), use `grid-template-rows: 0fr → 1fr` instead of animating `height` directly.
|
||||
|
||||
## Staggered Animations
|
||||
|
||||
Use CSS custom properties for cleaner stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"` on each item. **Cap total stagger time**—10 items at 50ms = 500ms total. For many items, reduce per-item delay or cap staggered count.
|
||||
|
||||
## Reduced Motion
|
||||
|
||||
This is not optional. Vestibular disorders affect ~35% of adults over 40.
|
||||
|
||||
```css
|
||||
/* Define animations normally */
|
||||
.card {
|
||||
animation: slide-up 500ms ease-out;
|
||||
}
|
||||
|
||||
/* Provide alternative for reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.card {
|
||||
animation: fade-in 200ms ease-out; /* Crossfade instead of motion */
|
||||
}
|
||||
}
|
||||
|
||||
/* Or disable entirely */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**What to preserve**: Functional animations like progress bars, loading spinners (slowed down), and focus indicators should still work—just without spatial movement.
|
||||
|
||||
## Perceived Performance
|
||||
|
||||
**Nobody cares how fast your site is—just how fast it feels.** Perception can be as effective as actual performance.
|
||||
|
||||
**The 80ms threshold**: Our brains buffer sensory input for ~80ms to synchronize perception. Anything under 80ms feels instant and simultaneous. This is your target for micro-interactions.
|
||||
|
||||
**Active vs passive time**: Passive waiting (staring at a spinner) feels longer than active engagement. Strategies to shift the balance:
|
||||
|
||||
- **Preemptive start**: Begin transitions immediately while loading (iOS app zoom, skeleton UI). Users perceive work happening.
|
||||
- **Early completion**: Show content progressively—don't wait for everything. Video buffering, progressive images, streaming HTML.
|
||||
- **Optimistic UI**: Update the interface immediately, handle failures gracefully. Instagram likes work offline—the UI updates instantly, syncs later. Use for low-stakes actions; avoid for payments or destructive operations.
|
||||
|
||||
**Easing affects perceived duration**: Ease-in (accelerating toward completion) makes tasks feel shorter because the peak-end effect weights final moments heavily. Ease-out feels satisfying for entrances, but ease-in toward a task's end compresses perceived time.
|
||||
|
||||
**Caution**: Too-fast responses can decrease perceived value. Users may distrust instant results for complex operations (search, analysis). Sometimes a brief delay signals "real work" is happening.
|
||||
|
||||
## Performance
|
||||
|
||||
Don't use `will-change` preemptively—only when animation is imminent (`:hover`, `.animating`). For scroll-triggered animations, use Intersection Observer instead of scroll events; unobserve after animating once. Create motion tokens for consistency (durations, easings, common transitions).
|
||||
|
||||
---
|
||||
|
||||
**Avoid**: Animating everything (animation fatigue is real). Using >500ms for UI feedback. Ignoring `prefers-reduced-motion`. Using animation to hide slow loading.
|
||||
@@ -1,114 +0,0 @@
|
||||
# Responsive Design
|
||||
|
||||
## Mobile-First: Write It Right
|
||||
|
||||
Start with base styles for mobile, use `min-width` queries to layer complexity. Desktop-first (`max-width`) means mobile loads unnecessary styles first.
|
||||
|
||||
## Breakpoints: Content-Driven
|
||||
|
||||
Don't chase device sizes—let content tell you where to break. Start narrow, stretch until design breaks, add breakpoint there. Three breakpoints usually suffice (640, 768, 1024px). Use `clamp()` for fluid values without breakpoints.
|
||||
|
||||
## Detect Input Method, Not Just Screen Size
|
||||
|
||||
**Screen size doesn't tell you input method.** A laptop with touchscreen, a tablet with keyboard—use pointer and hover queries:
|
||||
|
||||
```css
|
||||
/* Fine pointer (mouse, trackpad) */
|
||||
@media (pointer: fine) {
|
||||
.button { padding: 8px 16px; }
|
||||
}
|
||||
|
||||
/* Coarse pointer (touch, stylus) */
|
||||
@media (pointer: coarse) {
|
||||
.button { padding: 12px 20px; } /* Larger touch target */
|
||||
}
|
||||
|
||||
/* Device supports hover */
|
||||
@media (hover: hover) {
|
||||
.card:hover { transform: translateY(-2px); }
|
||||
}
|
||||
|
||||
/* Device doesn't support hover (touch) */
|
||||
@media (hover: none) {
|
||||
.card { /* No hover state - use active instead */ }
|
||||
}
|
||||
```
|
||||
|
||||
**Critical**: Don't rely on hover for functionality. Touch users can't hover.
|
||||
|
||||
## Safe Areas: Handle the Notch
|
||||
|
||||
Modern phones have notches, rounded corners, and home indicators. Use `env()`:
|
||||
|
||||
```css
|
||||
body {
|
||||
padding-top: env(safe-area-inset-top);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
padding-left: env(safe-area-inset-left);
|
||||
padding-right: env(safe-area-inset-right);
|
||||
}
|
||||
|
||||
/* With fallback */
|
||||
.footer {
|
||||
padding-bottom: max(1rem, env(safe-area-inset-bottom));
|
||||
}
|
||||
```
|
||||
|
||||
**Enable viewport-fit** in your meta tag:
|
||||
```html
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
```
|
||||
|
||||
## Responsive Images: Get It Right
|
||||
|
||||
### srcset with Width Descriptors
|
||||
|
||||
```html
|
||||
<img
|
||||
src="hero-800.jpg"
|
||||
srcset="
|
||||
hero-400.jpg 400w,
|
||||
hero-800.jpg 800w,
|
||||
hero-1200.jpg 1200w
|
||||
"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
alt="Hero image"
|
||||
>
|
||||
```
|
||||
|
||||
**How it works**:
|
||||
- `srcset` lists available images with their actual widths (`w` descriptors)
|
||||
- `sizes` tells the browser how wide the image will display
|
||||
- Browser picks the best file based on viewport width AND device pixel ratio
|
||||
|
||||
### Picture Element for Art Direction
|
||||
|
||||
When you need different crops/compositions (not just resolutions):
|
||||
|
||||
```html
|
||||
<picture>
|
||||
<source media="(min-width: 768px)" srcset="wide.jpg">
|
||||
<source media="(max-width: 767px)" srcset="tall.jpg">
|
||||
<img src="fallback.jpg" alt="...">
|
||||
</picture>
|
||||
```
|
||||
|
||||
## Layout Adaptation Patterns
|
||||
|
||||
**Navigation**: Three stages—hamburger + drawer on mobile, horizontal compact on tablet, full with labels on desktop. **Tables**: Transform to cards on mobile using `display: block` and `data-label` attributes. **Progressive disclosure**: Use `<details>/<summary>` for content that can collapse on mobile.
|
||||
|
||||
## Testing: Don't Trust DevTools Alone
|
||||
|
||||
DevTools device emulation is useful for layout but misses:
|
||||
|
||||
- Actual touch interactions
|
||||
- Real CPU/memory constraints
|
||||
- Network latency patterns
|
||||
- Font rendering differences
|
||||
- Browser chrome/keyboard appearances
|
||||
|
||||
**Test on at least**: One real iPhone, one real Android, a tablet if relevant. Cheap Android phones reveal performance issues you'll never see on simulators.
|
||||
|
||||
---
|
||||
|
||||
**Avoid**: Desktop-first design. Device detection instead of feature detection. Separate mobile/desktop codebases. Ignoring tablet and landscape. Assuming all mobile devices are powerful.
|
||||
@@ -1,100 +0,0 @@
|
||||
# Spatial Design
|
||||
|
||||
## Spacing Systems
|
||||
|
||||
### Use 4pt Base, Not 8pt
|
||||
|
||||
8pt systems are too coarse—you'll frequently need 12px (between 8 and 16). Use 4pt for granularity: 4, 8, 12, 16, 24, 32, 48, 64, 96px.
|
||||
|
||||
### Name Tokens Semantically
|
||||
|
||||
Name by relationship (`--space-sm`, `--space-lg`), not value (`--spacing-8`). Use `gap` instead of margins for sibling spacing—it eliminates margin collapse and cleanup hacks.
|
||||
|
||||
## Grid Systems
|
||||
|
||||
### The Self-Adjusting Grid
|
||||
|
||||
Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. Columns are at least 280px, as many as fit per row, leftovers stretch. For complex layouts, use named grid areas (`grid-template-areas`) and redefine them at breakpoints.
|
||||
|
||||
## Visual Hierarchy
|
||||
|
||||
### The Squint Test
|
||||
|
||||
Blur your eyes (or screenshot and blur). Can you still identify:
|
||||
- The most important element?
|
||||
- The second most important?
|
||||
- Clear groupings?
|
||||
|
||||
If everything looks the same weight blurred, you have a hierarchy problem.
|
||||
|
||||
### Hierarchy Through Multiple Dimensions
|
||||
|
||||
Don't rely on size alone. Combine:
|
||||
|
||||
| Tool | Strong Hierarchy | Weak Hierarchy |
|
||||
|------|------------------|----------------|
|
||||
| **Size** | 3:1 ratio or more | <2:1 ratio |
|
||||
| **Weight** | Bold vs Regular | Medium vs Regular |
|
||||
| **Color** | High contrast | Similar tones |
|
||||
| **Position** | Top/left (primary) | Bottom/right |
|
||||
| **Space** | Surrounded by white space | Crowded |
|
||||
|
||||
**The best hierarchy uses 2-3 dimensions at once**: A heading that's larger, bolder, AND has more space above it.
|
||||
|
||||
### Cards Are Not Required
|
||||
|
||||
Cards are overused. Spacing and alignment create visual grouping naturally. Use cards only when content is truly distinct and actionable, items need visual comparison in a grid, or content needs clear interaction boundaries. **Never nest cards inside cards**—use spacing, typography, and subtle dividers for hierarchy within a card.
|
||||
|
||||
## Container Queries
|
||||
|
||||
Viewport queries are for page layouts. **Container queries are for components**:
|
||||
|
||||
```css
|
||||
.card-container {
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: grid;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
/* Card layout changes based on its container, not viewport */
|
||||
@container (min-width: 400px) {
|
||||
.card {
|
||||
grid-template-columns: 120px 1fr;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Why this matters**: A card in a narrow sidebar stays compact, while the same card in a main content area expands—automatically, without viewport hacks.
|
||||
|
||||
## Optical Adjustments
|
||||
|
||||
Text at `margin-left: 0` looks indented due to letterform whitespace—use negative margin (`-0.05em`) to optically align. Geometrically centered icons often look off-center; play icons need to shift right, arrows shift toward their direction.
|
||||
|
||||
### Touch Targets vs Visual Size
|
||||
|
||||
Buttons can look small but need large touch targets (44px minimum). Use padding or pseudo-elements:
|
||||
|
||||
```css
|
||||
.icon-button {
|
||||
width: 24px; /* Visual size */
|
||||
height: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -10px; /* Expand tap target to 44px */
|
||||
}
|
||||
```
|
||||
|
||||
## Depth & Elevation
|
||||
|
||||
Create semantic z-index scales (dropdown → sticky → modal-backdrop → modal → toast → tooltip) instead of arbitrary numbers. For shadows, create a consistent elevation scale (sm → md → lg → xl). **Key insight**: Shadows should be subtle—if you can clearly see it, it's probably too strong.
|
||||
|
||||
---
|
||||
|
||||
**Avoid**: Arbitrary spacing values outside your scale. Making all spacing equal (variety creates hierarchy). Creating hierarchy through size alone - combine size, weight, color, and space.
|
||||
@@ -1,131 +0,0 @@
|
||||
# Typography
|
||||
|
||||
## Classic Typography Principles
|
||||
|
||||
### Vertical Rhythm
|
||||
|
||||
Your line-height should be the base unit for ALL vertical spacing. If body text has `line-height: 1.5` on `16px` type (= 24px), spacing values should be multiples of 24px. This creates subconscious harmony—text and space share a mathematical foundation.
|
||||
|
||||
### Modular Scale & Hierarchy
|
||||
|
||||
The common mistake: too many font sizes that are too close together (14px, 15px, 16px, 18px...). This creates muddy hierarchy.
|
||||
|
||||
**Use fewer sizes with more contrast.** A 5-size system covers most needs:
|
||||
|
||||
| Role | Typical Ratio | Use Case |
|
||||
|------|---------------|----------|
|
||||
| xs | 0.75rem | Captions, legal |
|
||||
| sm | 0.875rem | Secondary UI, metadata |
|
||||
| base | 1rem | Body text |
|
||||
| lg | 1.25-1.5rem | Subheadings, lead text |
|
||||
| xl+ | 2-4rem | Headlines, hero text |
|
||||
|
||||
Popular ratios: 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth). Pick one and commit.
|
||||
|
||||
### Readability & Measure
|
||||
|
||||
Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scales inversely with line length—narrow columns need tighter leading, wide columns need more.
|
||||
|
||||
**Non-obvious**: Increase line-height for light text on dark backgrounds. The perceived weight is lighter, so text needs more breathing room. Add 0.05-0.1 to your normal line-height.
|
||||
|
||||
## Font Selection & Pairing
|
||||
|
||||
### Choosing Distinctive Fonts
|
||||
|
||||
**Avoid the invisible defaults**: Inter, Roboto, Open Sans, Lato, Montserrat. These are everywhere, making your design feel generic. They're fine for documentation or tools where personality isn't the goal—but if you want distinctive design, look elsewhere.
|
||||
|
||||
**Better Google Fonts alternatives**:
|
||||
- Instead of Inter → **Instrument Sans**, **Plus Jakarta Sans**, **Outfit**
|
||||
- Instead of Roboto → **Onest**, **Figtree**, **Urbanist**
|
||||
- Instead of Open Sans → **Source Sans 3**, **Nunito Sans**, **DM Sans**
|
||||
- For editorial/premium feel → **Fraunces**, **Newsreader**, **Lora**
|
||||
|
||||
**System fonts are underrated**: `-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui` looks native, loads instantly, and is highly readable. Consider this for apps where performance > personality.
|
||||
|
||||
### Pairing Principles
|
||||
|
||||
**The non-obvious truth**: You often don't need a second font. One well-chosen font family in multiple weights creates cleaner hierarchy than two competing typefaces. Only add a second font when you need genuine contrast (e.g., display headlines + body serif).
|
||||
|
||||
When pairing, contrast on multiple axes:
|
||||
- Serif + Sans (structure contrast)
|
||||
- Geometric + Humanist (personality contrast)
|
||||
- Condensed display + Wide body (proportion contrast)
|
||||
|
||||
**Never pair fonts that are similar but not identical** (e.g., two geometric sans-serifs). They create visual tension without clear hierarchy.
|
||||
|
||||
### Web Font Loading
|
||||
|
||||
The layout shift problem: fonts load late, text reflows, and users see content jump. Here's the fix:
|
||||
|
||||
```css
|
||||
/* 1. Use font-display: swap for visibility */
|
||||
@font-face {
|
||||
font-family: 'CustomFont';
|
||||
src: url('font.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* 2. Match fallback metrics to minimize shift */
|
||||
@font-face {
|
||||
font-family: 'CustomFont-Fallback';
|
||||
src: local('Arial');
|
||||
size-adjust: 105%; /* Scale to match x-height */
|
||||
ascent-override: 90%; /* Match ascender height */
|
||||
descent-override: 20%; /* Match descender depth */
|
||||
line-gap-override: 10%; /* Match line spacing */
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'CustomFont', 'CustomFont-Fallback', sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
Tools like [Fontaine](https://github.com/unjs/fontaine) calculate these overrides automatically.
|
||||
|
||||
## Modern Web Typography
|
||||
|
||||
### Fluid Type
|
||||
|
||||
Use `clamp(min, preferred, max)` for fluid typography. The middle value (e.g., `5vw + 1rem`) controls scaling rate—higher vw = faster scaling. Add a rem offset so it doesn't collapse to 0 on small screens.
|
||||
|
||||
**When NOT to use fluid type**: Button text, labels, UI elements (should be consistent), very short text, or when you need precise breakpoint control.
|
||||
|
||||
### OpenType Features
|
||||
|
||||
Most developers don't know these exist. Use them for polish:
|
||||
|
||||
```css
|
||||
/* Tabular numbers for data alignment */
|
||||
.data-table { font-variant-numeric: tabular-nums; }
|
||||
|
||||
/* Proper fractions */
|
||||
.recipe-amount { font-variant-numeric: diagonal-fractions; }
|
||||
|
||||
/* Small caps for abbreviations */
|
||||
abbr { font-variant-caps: all-small-caps; }
|
||||
|
||||
/* Disable ligatures in code */
|
||||
code { font-variant-ligatures: none; }
|
||||
|
||||
/* Enable kerning (usually on by default, but be explicit) */
|
||||
body { font-kerning: normal; }
|
||||
```
|
||||
|
||||
Check what features your font supports at [Wakamai Fondue](https://wakamaifondue.com/).
|
||||
|
||||
## Typography System Architecture
|
||||
|
||||
Name tokens semantically (`--text-body`, `--text-heading`), not by value (`--font-size-16`). Include font stacks, size scale, weights, line-heights, and letter-spacing in your token system.
|
||||
|
||||
## Accessibility Considerations
|
||||
|
||||
Beyond contrast ratios (which are well-documented), consider:
|
||||
|
||||
- **Never disable zoom**: `user-scalable=no` breaks accessibility. If your layout breaks at 200% zoom, fix the layout.
|
||||
- **Use rem/em for font sizes**: This respects user browser settings. Never `px` for body text.
|
||||
- **Minimum 16px body text**: Smaller than this strains eyes and fails WCAG on mobile.
|
||||
- **Adequate touch targets**: Text links need padding or line-height that creates 44px+ tap targets.
|
||||
|
||||
---
|
||||
|
||||
**Avoid**: More than 2-3 font families per project. Skipping fallback font definitions. Ignoring font loading performance (FOUT/FOIT). Using decorative fonts for body text.
|
||||
@@ -1,107 +0,0 @@
|
||||
# UX Writing
|
||||
|
||||
## The Button Label Problem
|
||||
|
||||
**Never use "OK", "Submit", or "Yes/No".** These are lazy and ambiguous. Use specific verb + object patterns:
|
||||
|
||||
| Bad | Good | Why |
|
||||
|-----|------|-----|
|
||||
| OK | Save changes | Says what will happen |
|
||||
| Submit | Create account | Outcome-focused |
|
||||
| Yes | Delete message | Confirms the action |
|
||||
| Cancel | Keep editing | Clarifies what "cancel" means |
|
||||
| Click here | Download PDF | Describes the destination |
|
||||
|
||||
**For destructive actions**, name the destruction:
|
||||
- "Delete" not "Remove" (delete is permanent, remove implies recoverable)
|
||||
- "Delete 5 items" not "Delete selected" (show the count)
|
||||
|
||||
## Error Messages: The Formula
|
||||
|
||||
Every error message should answer: (1) What happened? (2) Why? (3) How to fix it? Example: "Email address isn't valid. Please include an @ symbol." not "Invalid input".
|
||||
|
||||
### Error Message Templates
|
||||
|
||||
| Situation | Template |
|
||||
|-----------|----------|
|
||||
| **Format error** | "[Field] needs to be [format]. Example: [example]" |
|
||||
| **Missing required** | "Please enter [what's missing]" |
|
||||
| **Permission denied** | "You don't have access to [thing]. [What to do instead]" |
|
||||
| **Network error** | "We couldn't reach [thing]. Check your connection and [action]." |
|
||||
| **Server error** | "Something went wrong on our end. We're looking into it. [Alternative action]" |
|
||||
|
||||
### Don't Blame the User
|
||||
|
||||
Reframe errors: "Please enter a date in MM/DD/YYYY format" not "You entered an invalid date".
|
||||
|
||||
## Empty States Are Opportunities
|
||||
|
||||
Empty states are onboarding moments: (1) Acknowledge briefly, (2) Explain the value of filling it, (3) Provide a clear action. "No projects yet. Create your first one to get started." not just "No items".
|
||||
|
||||
## Voice vs Tone
|
||||
|
||||
**Voice** is your brand's personality—consistent everywhere.
|
||||
**Tone** adapts to the moment.
|
||||
|
||||
| Moment | Tone Shift |
|
||||
|--------|------------|
|
||||
| Success | Celebratory, brief: "Done! Your changes are live." |
|
||||
| Error | Empathetic, helpful: "That didn't work. Here's what to try..." |
|
||||
| Loading | Reassuring: "Saving your work..." |
|
||||
| Destructive confirm | Serious, clear: "Delete this project? This can't be undone." |
|
||||
|
||||
**Never use humor for errors.** Users are already frustrated. Be helpful, not cute.
|
||||
|
||||
## Writing for Accessibility
|
||||
|
||||
**Link text** must have standalone meaning—"View pricing plans" not "Click here". **Alt text** describes information, not the image—"Revenue increased 40% in Q4" not "Chart". Use `alt=""` for decorative images. **Icon buttons** need `aria-label` for screen reader context.
|
||||
|
||||
## Writing for Translation
|
||||
|
||||
### Plan for Expansion
|
||||
|
||||
German text is ~30% longer than English. Allocate space:
|
||||
|
||||
| Language | Expansion |
|
||||
|----------|-----------|
|
||||
| German | +30% |
|
||||
| French | +20% |
|
||||
| Finnish | +30-40% |
|
||||
| Chinese | -30% (fewer chars, but same width) |
|
||||
|
||||
### Translation-Friendly Patterns
|
||||
|
||||
Keep numbers separate ("New messages: 3" not "You have 3 new messages"). Use full sentences as single strings (word order varies by language). Avoid abbreviations ("5 minutes ago" not "5 mins ago"). Give translators context about where strings appear.
|
||||
|
||||
## Consistency: The Terminology Problem
|
||||
|
||||
Pick one term and stick with it:
|
||||
|
||||
| Inconsistent | Consistent |
|
||||
|--------------|------------|
|
||||
| Delete / Remove / Trash | Delete |
|
||||
| Settings / Preferences / Options | Settings |
|
||||
| Sign in / Log in / Enter | Sign in |
|
||||
| Create / Add / New | Create |
|
||||
|
||||
Build a terminology glossary and enforce it. Variety creates confusion.
|
||||
|
||||
## Avoid Redundant Copy
|
||||
|
||||
If the heading explains it, the intro is redundant. If the button is clear, don't explain it again. Say it once, say it well.
|
||||
|
||||
## Loading States
|
||||
|
||||
Be specific: "Saving your draft..." not "Loading...". For long waits, set expectations ("This usually takes 30 seconds") or show progress.
|
||||
|
||||
## Confirmation Dialogs: Use Sparingly
|
||||
|
||||
Most confirmation dialogs are design failures—consider undo instead. When you must confirm: name the action, explain consequences, use specific button labels ("Delete project" / "Keep project", not "Yes" / "No").
|
||||
|
||||
## Form Instructions
|
||||
|
||||
Show format with placeholders, not instructions. For non-obvious fields, explain why you're asking.
|
||||
|
||||
---
|
||||
|
||||
**Avoid**: Jargon without explanation. Blaming users ("You made an error" → "This field is required"). Vague errors ("Something went wrong"). Varying terminology for variety. Humor for errors.
|
||||
@@ -1,357 +0,0 @@
|
||||
---
|
||||
name: harden
|
||||
description: Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready.
|
||||
user-invokable: true
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or area to harden (optional)
|
||||
required: false
|
||||
---
|
||||
|
||||
Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs.
|
||||
|
||||
## Assess Hardening Needs
|
||||
|
||||
Identify weaknesses and edge cases:
|
||||
|
||||
1. **Test with extreme inputs**:
|
||||
- Very long text (names, descriptions, titles)
|
||||
- Very short text (empty, single character)
|
||||
- Special characters (emoji, RTL text, accents)
|
||||
- Large numbers (millions, billions)
|
||||
- Many items (1000+ list items, 50+ options)
|
||||
- No data (empty states)
|
||||
|
||||
2. **Test error scenarios**:
|
||||
- Network failures (offline, slow, timeout)
|
||||
- API errors (400, 401, 403, 404, 500)
|
||||
- Validation errors
|
||||
- Permission errors
|
||||
- Rate limiting
|
||||
- Concurrent operations
|
||||
|
||||
3. **Test internationalization**:
|
||||
- Long translations (German is often 30% longer than English)
|
||||
- RTL languages (Arabic, Hebrew)
|
||||
- Character sets (Chinese, Japanese, Korean, emoji)
|
||||
- Date/time formats
|
||||
- Number formats (1,000 vs 1.000)
|
||||
- Currency symbols
|
||||
|
||||
**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality.
|
||||
|
||||
## Hardening Dimensions
|
||||
|
||||
Systematically improve resilience:
|
||||
|
||||
### Text Overflow & Wrapping
|
||||
|
||||
**Long text handling**:
|
||||
```css
|
||||
/* Single line with ellipsis */
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Multi-line with clamp */
|
||||
.line-clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Allow wrapping */
|
||||
.wrap {
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
```
|
||||
|
||||
**Flex/Grid overflow**:
|
||||
```css
|
||||
/* Prevent flex items from overflowing */
|
||||
.flex-item {
|
||||
min-width: 0; /* Allow shrinking below content size */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Prevent grid items from overflowing */
|
||||
.grid-item {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
```
|
||||
|
||||
**Responsive text sizing**:
|
||||
- Use `clamp()` for fluid typography
|
||||
- Set minimum readable sizes (14px on mobile)
|
||||
- Test text scaling (zoom to 200%)
|
||||
- Ensure containers expand with text
|
||||
|
||||
### Internationalization (i18n)
|
||||
|
||||
**Text expansion**:
|
||||
- Add 30-40% space budget for translations
|
||||
- Use flexbox/grid that adapts to content
|
||||
- Test with longest language (usually German)
|
||||
- Avoid fixed widths on text containers
|
||||
|
||||
```jsx
|
||||
// ❌ Bad: Assumes short English text
|
||||
<button className="w-24">Submit</button>
|
||||
|
||||
// ✅ Good: Adapts to content
|
||||
<button className="px-4 py-2">Submit</button>
|
||||
```
|
||||
|
||||
**RTL (Right-to-Left) support**:
|
||||
```css
|
||||
/* Use logical properties */
|
||||
margin-inline-start: 1rem; /* Not margin-left */
|
||||
padding-inline: 1rem; /* Not padding-left/right */
|
||||
border-inline-end: 1px solid; /* Not border-right */
|
||||
|
||||
/* Or use dir attribute */
|
||||
[dir="rtl"] .arrow { transform: scaleX(-1); }
|
||||
```
|
||||
|
||||
**Character set support**:
|
||||
- Use UTF-8 encoding everywhere
|
||||
- Test with Chinese/Japanese/Korean (CJK) characters
|
||||
- Test with emoji (they can be 2-4 bytes)
|
||||
- Handle different scripts (Latin, Cyrillic, Arabic, etc.)
|
||||
|
||||
**Date/Time formatting**:
|
||||
```javascript
|
||||
// ✅ Use Intl API for proper formatting
|
||||
new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024
|
||||
new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024
|
||||
|
||||
new Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD'
|
||||
}).format(1234.56); // $1,234.56
|
||||
```
|
||||
|
||||
**Pluralization**:
|
||||
```javascript
|
||||
// ❌ Bad: Assumes English pluralization
|
||||
`${count} item${count !== 1 ? 's' : ''}`
|
||||
|
||||
// ✅ Good: Use proper i18n library
|
||||
t('items', { count }) // Handles complex plural rules
|
||||
```
|
||||
|
||||
### Error Handling
|
||||
|
||||
**Network errors**:
|
||||
- Show clear error messages
|
||||
- Provide retry button
|
||||
- Explain what happened
|
||||
- Offer offline mode (if applicable)
|
||||
- Handle timeout scenarios
|
||||
|
||||
```jsx
|
||||
// Error states with recovery
|
||||
{error && (
|
||||
<ErrorMessage>
|
||||
<p>Failed to load data. {error.message}</p>
|
||||
<button onClick={retry}>Try again</button>
|
||||
</ErrorMessage>
|
||||
)}
|
||||
```
|
||||
|
||||
**Form validation errors**:
|
||||
- Inline errors near fields
|
||||
- Clear, specific messages
|
||||
- Suggest corrections
|
||||
- Don't block submission unnecessarily
|
||||
- Preserve user input on error
|
||||
|
||||
**API errors**:
|
||||
- Handle each status code appropriately
|
||||
- 400: Show validation errors
|
||||
- 401: Redirect to login
|
||||
- 403: Show permission error
|
||||
- 404: Show not found state
|
||||
- 429: Show rate limit message
|
||||
- 500: Show generic error, offer support
|
||||
|
||||
**Graceful degradation**:
|
||||
- Core functionality works without JavaScript
|
||||
- Images have alt text
|
||||
- Progressive enhancement
|
||||
- Fallbacks for unsupported features
|
||||
|
||||
### Edge Cases & Boundary Conditions
|
||||
|
||||
**Empty states**:
|
||||
- No items in list
|
||||
- No search results
|
||||
- No notifications
|
||||
- No data to display
|
||||
- Provide clear next action
|
||||
|
||||
**Loading states**:
|
||||
- Initial load
|
||||
- Pagination load
|
||||
- Refresh
|
||||
- Show what's loading ("Loading your projects...")
|
||||
- Time estimates for long operations
|
||||
|
||||
**Large datasets**:
|
||||
- Pagination or virtual scrolling
|
||||
- Search/filter capabilities
|
||||
- Performance optimization
|
||||
- Don't load all 10,000 items at once
|
||||
|
||||
**Concurrent operations**:
|
||||
- Prevent double-submission (disable button while loading)
|
||||
- Handle race conditions
|
||||
- Optimistic updates with rollback
|
||||
- Conflict resolution
|
||||
|
||||
**Permission states**:
|
||||
- No permission to view
|
||||
- No permission to edit
|
||||
- Read-only mode
|
||||
- Clear explanation of why
|
||||
|
||||
**Browser compatibility**:
|
||||
- Polyfills for modern features
|
||||
- Fallbacks for unsupported CSS
|
||||
- Feature detection (not browser detection)
|
||||
- Test in target browsers
|
||||
|
||||
### Input Validation & Sanitization
|
||||
|
||||
**Client-side validation**:
|
||||
- Required fields
|
||||
- Format validation (email, phone, URL)
|
||||
- Length limits
|
||||
- Pattern matching
|
||||
- Custom validation rules
|
||||
|
||||
**Server-side validation** (always):
|
||||
- Never trust client-side only
|
||||
- Validate and sanitize all inputs
|
||||
- Protect against injection attacks
|
||||
- Rate limiting
|
||||
|
||||
**Constraint handling**:
|
||||
```html
|
||||
<!-- Set clear constraints -->
|
||||
<input
|
||||
type="text"
|
||||
maxlength="100"
|
||||
pattern="[A-Za-z0-9]+"
|
||||
required
|
||||
aria-describedby="username-hint"
|
||||
/>
|
||||
<small id="username-hint">
|
||||
Letters and numbers only, up to 100 characters
|
||||
</small>
|
||||
```
|
||||
|
||||
### Accessibility Resilience
|
||||
|
||||
**Keyboard navigation**:
|
||||
- All functionality accessible via keyboard
|
||||
- Logical tab order
|
||||
- Focus management in modals
|
||||
- Skip links for long content
|
||||
|
||||
**Screen reader support**:
|
||||
- Proper ARIA labels
|
||||
- Announce dynamic changes (live regions)
|
||||
- Descriptive alt text
|
||||
- Semantic HTML
|
||||
|
||||
**Motion sensitivity**:
|
||||
```css
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**High contrast mode**:
|
||||
- Test in Windows high contrast mode
|
||||
- Don't rely only on color
|
||||
- Provide alternative visual cues
|
||||
|
||||
### Performance Resilience
|
||||
|
||||
**Slow connections**:
|
||||
- Progressive image loading
|
||||
- Skeleton screens
|
||||
- Optimistic UI updates
|
||||
- Offline support (service workers)
|
||||
|
||||
**Memory leaks**:
|
||||
- Clean up event listeners
|
||||
- Cancel subscriptions
|
||||
- Clear timers/intervals
|
||||
- Abort pending requests on unmount
|
||||
|
||||
**Throttling & Debouncing**:
|
||||
```javascript
|
||||
// Debounce search input
|
||||
const debouncedSearch = debounce(handleSearch, 300);
|
||||
|
||||
// Throttle scroll handler
|
||||
const throttledScroll = throttle(handleScroll, 100);
|
||||
```
|
||||
|
||||
## Testing Strategies
|
||||
|
||||
**Manual testing**:
|
||||
- Test with extreme data (very long, very short, empty)
|
||||
- Test in different languages
|
||||
- Test offline
|
||||
- Test slow connection (throttle to 3G)
|
||||
- Test with screen reader
|
||||
- Test keyboard-only navigation
|
||||
- Test on old browsers
|
||||
|
||||
**Automated testing**:
|
||||
- Unit tests for edge cases
|
||||
- Integration tests for error scenarios
|
||||
- E2E tests for critical paths
|
||||
- Visual regression tests
|
||||
- Accessibility tests (axe, WAVE)
|
||||
|
||||
**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined.
|
||||
|
||||
**NEVER**:
|
||||
- Assume perfect input (validate everything)
|
||||
- Ignore internationalization (design for global)
|
||||
- Leave error messages generic ("Error occurred")
|
||||
- Forget offline scenarios
|
||||
- Trust client-side validation alone
|
||||
- Use fixed widths for text
|
||||
- Assume English-length text
|
||||
- Block entire interface when one component errors
|
||||
|
||||
## Verify Hardening
|
||||
|
||||
Test thoroughly with edge cases:
|
||||
|
||||
- **Long text**: Try names with 100+ characters
|
||||
- **Emoji**: Use emoji in all text fields
|
||||
- **RTL**: Test with Arabic or Hebrew
|
||||
- **CJK**: Test with Chinese/Japanese/Korean
|
||||
- **Network issues**: Disable internet, throttle connection
|
||||
- **Large datasets**: Test with 1000+ items
|
||||
- **Concurrent actions**: Click submit 10 times rapidly
|
||||
- **Errors**: Force API errors, test all error states
|
||||
- **Empty**: Remove all data, test empty states
|
||||
|
||||
Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component.
|
||||
@@ -1,67 +0,0 @@
|
||||
---
|
||||
name: normalize
|
||||
description: Normalize design to match your design system and ensure consistency
|
||||
user-invokable: true
|
||||
args:
|
||||
- name: feature
|
||||
description: The page, route, or feature to normalize (optional)
|
||||
required: false
|
||||
---
|
||||
|
||||
Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns.
|
||||
|
||||
## Plan
|
||||
|
||||
Before making changes, deeply understand the context:
|
||||
|
||||
1. **Discover the design system**: Search for design system documentation, UI guidelines, component libraries, or style guides (grep for "design system", "ui guide", "style guide", etc.). Study it thoroughly until you understand:
|
||||
- Core design principles and aesthetic direction
|
||||
- Target audience and personas
|
||||
- Component patterns and conventions
|
||||
- Design tokens (colors, typography, spacing)
|
||||
|
||||
**CRITICAL**: If something isn't clear, ask. Don't guess at design system principles.
|
||||
|
||||
2. **Analyze the current feature**: Assess what works and what doesn't:
|
||||
- Where does it deviate from design system patterns?
|
||||
- Which inconsistencies are cosmetic vs. functional?
|
||||
- What's the root cause—missing tokens, one-off implementations, or conceptual misalignment?
|
||||
|
||||
3. **Create a normalization plan**: Define specific changes that will align the feature with the design system:
|
||||
- Which components can be replaced with design system equivalents?
|
||||
- Which styles need to use design tokens instead of hard-coded values?
|
||||
- How can UX patterns match established user flows?
|
||||
|
||||
**IMPORTANT**: Great design is effective design. Prioritize UX consistency and usability over visual polish alone. Think through the best possible experience for your use case and personas first.
|
||||
|
||||
## Execute
|
||||
|
||||
Systematically address all inconsistencies across these dimensions:
|
||||
|
||||
- **Typography**: Use design system fonts, sizes, weights, and line heights. Replace hard-coded values with typographic tokens or classes.
|
||||
- **Color & Theme**: Apply design system color tokens. Remove one-off color choices that break the palette.
|
||||
- **Spacing & Layout**: Use spacing tokens (margins, padding, gaps). Align with grid systems and layout patterns used elsewhere.
|
||||
- **Components**: Replace custom implementations with design system components. Ensure props and variants match established patterns.
|
||||
- **Motion & Interaction**: Match animation timing, easing, and interaction patterns to other features.
|
||||
- **Responsive Behavior**: Ensure breakpoints and responsive patterns align with design system standards.
|
||||
- **Accessibility**: Verify contrast ratios, focus states, ARIA labels match design system requirements.
|
||||
- **Progressive Disclosure**: Match information hierarchy and complexity management to established patterns.
|
||||
|
||||
**NEVER**:
|
||||
- Create new one-off components when design system equivalents exist
|
||||
- Hard-code values that should use design tokens
|
||||
- Introduce new patterns that diverge from the design system
|
||||
- Compromise accessibility for visual consistency
|
||||
|
||||
This is not an exhaustive list—apply judgment to identify all areas needing normalization.
|
||||
|
||||
## Clean Up
|
||||
|
||||
After normalization, ensure code quality:
|
||||
|
||||
- **Consolidate reusable components**: If you created new components that should be shared, move them to the design system or shared UI component path.
|
||||
- **Remove orphaned code**: Delete unused implementations, styles, or files made obsolete by normalization.
|
||||
- **Verify quality**: Lint, type-check, and test according to repository guidelines. Ensure normalization didn't introduce regressions.
|
||||
- **Ensure DRYness**: Look for duplication introduced during refactoring and consolidate.
|
||||
|
||||
Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness.
|
||||
@@ -1,242 +0,0 @@
|
||||
---
|
||||
name: onboard
|
||||
description: Design or improve onboarding flows, empty states, and first-time user experiences. Helps users get started successfully and understand value quickly.
|
||||
user-invokable: true
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or area needing onboarding (optional)
|
||||
required: false
|
||||
---
|
||||
|
||||
Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly.
|
||||
|
||||
## Assess Onboarding Needs
|
||||
|
||||
Understand what users need to learn and why:
|
||||
|
||||
1. **Identify the challenge**:
|
||||
- What are users trying to accomplish?
|
||||
- What's confusing or unclear about current experience?
|
||||
- Where do users get stuck or drop off?
|
||||
- What's the "aha moment" we want users to reach?
|
||||
|
||||
2. **Understand the users**:
|
||||
- What's their experience level? (Beginners, power users, mixed?)
|
||||
- What's their motivation? (Excited and exploring? Required by work?)
|
||||
- What's their time commitment? (5 minutes? 30 minutes?)
|
||||
- What alternatives do they know? (Coming from competitor? New to category?)
|
||||
|
||||
3. **Define success**:
|
||||
- What's the minimum users need to learn to be successful?
|
||||
- What's the key action we want them to take? (First project? First invite?)
|
||||
- How do we know onboarding worked? (Completion rate? Time to value?)
|
||||
|
||||
**CRITICAL**: Onboarding should get users to value as quickly as possible, not teach everything possible.
|
||||
|
||||
## Onboarding Principles
|
||||
|
||||
Follow these core principles:
|
||||
|
||||
### Show, Don't Tell
|
||||
- Demonstrate with working examples, not just descriptions
|
||||
- Provide real functionality in onboarding, not separate tutorial mode
|
||||
- Use progressive disclosure - teach one thing at a time
|
||||
|
||||
### Make It Optional (When Possible)
|
||||
- Let experienced users skip onboarding
|
||||
- Don't block access to product
|
||||
- Provide "Skip" or "I'll explore on my own" options
|
||||
|
||||
### Time to Value
|
||||
- Get users to their "aha moment" ASAP
|
||||
- Front-load most important concepts
|
||||
- Teach 20% that delivers 80% of value
|
||||
- Save advanced features for contextual discovery
|
||||
|
||||
### Context Over Ceremony
|
||||
- Teach features when users need them, not upfront
|
||||
- Empty states are onboarding opportunities
|
||||
- Tooltips and hints at point of use
|
||||
|
||||
### Respect User Intelligence
|
||||
- Don't patronize or over-explain
|
||||
- Be concise and clear
|
||||
- Assume users can figure out standard patterns
|
||||
|
||||
## Design Onboarding Experiences
|
||||
|
||||
Create appropriate onboarding for the context:
|
||||
|
||||
### Initial Product Onboarding
|
||||
|
||||
**Welcome Screen**:
|
||||
- Clear value proposition (what is this product?)
|
||||
- What users will learn/accomplish
|
||||
- Time estimate (honest about commitment)
|
||||
- Option to skip (for experienced users)
|
||||
|
||||
**Account Setup**:
|
||||
- Minimal required information (collect more later)
|
||||
- Explain why you're asking for each piece of information
|
||||
- Smart defaults where possible
|
||||
- Social login when appropriate
|
||||
|
||||
**Core Concept Introduction**:
|
||||
- Introduce 1-3 core concepts (not everything)
|
||||
- Use simple language and examples
|
||||
- Interactive when possible (do, don't just read)
|
||||
- Progress indication (step 1 of 3)
|
||||
|
||||
**First Success**:
|
||||
- Guide users to accomplish something real
|
||||
- Pre-populated examples or templates
|
||||
- Celebrate completion (but don't overdo it)
|
||||
- Clear next steps
|
||||
|
||||
### Feature Discovery & Adoption
|
||||
|
||||
**Empty States**:
|
||||
Instead of blank space, show:
|
||||
- What will appear here (description + screenshot/illustration)
|
||||
- Why it's valuable
|
||||
- Clear CTA to create first item
|
||||
- Example or template option
|
||||
|
||||
Example:
|
||||
```
|
||||
No projects yet
|
||||
Projects help you organize your work and collaborate with your team.
|
||||
[Create your first project] or [Start from template]
|
||||
```
|
||||
|
||||
**Contextual Tooltips**:
|
||||
- Appear at relevant moment (first time user sees feature)
|
||||
- Point directly at relevant UI element
|
||||
- Brief explanation + benefit
|
||||
- Dismissable (with "Don't show again" option)
|
||||
- Optional "Learn more" link
|
||||
|
||||
**Feature Announcements**:
|
||||
- Highlight new features when they're released
|
||||
- Show what's new and why it matters
|
||||
- Let users try immediately
|
||||
- Dismissable
|
||||
|
||||
**Progressive Onboarding**:
|
||||
- Teach features when users encounter them
|
||||
- Badges or indicators on new/unused features
|
||||
- Unlock complexity gradually (don't show all options immediately)
|
||||
|
||||
### Guided Tours & Walkthroughs
|
||||
|
||||
**When to use**:
|
||||
- Complex interfaces with many features
|
||||
- Significant changes to existing product
|
||||
- Industry-specific tools needing domain knowledge
|
||||
|
||||
**How to design**:
|
||||
- Spotlight specific UI elements (dim rest of page)
|
||||
- Keep steps short (3-7 steps max per tour)
|
||||
- Allow users to click through tour freely
|
||||
- Include "Skip tour" option
|
||||
- Make replayable (help menu)
|
||||
|
||||
**Best practices**:
|
||||
- Interactive > passive (let users click real buttons)
|
||||
- Focus on workflow, not features ("Create a project" not "This is the project button")
|
||||
- Provide sample data so actions work
|
||||
|
||||
### Interactive Tutorials
|
||||
|
||||
**When to use**:
|
||||
- Users need hands-on practice
|
||||
- Concepts are complex or unfamiliar
|
||||
- High stakes (better to practice in safe environment)
|
||||
|
||||
**How to design**:
|
||||
- Sandbox environment with sample data
|
||||
- Clear objectives ("Create a chart showing sales by region")
|
||||
- Step-by-step guidance
|
||||
- Validation (confirm they did it right)
|
||||
- Graduation moment (you're ready!)
|
||||
|
||||
### Documentation & Help
|
||||
|
||||
**In-product help**:
|
||||
- Contextual help links throughout interface
|
||||
- Keyboard shortcut reference
|
||||
- Search-able help center
|
||||
- Video tutorials for complex workflows
|
||||
|
||||
**Help patterns**:
|
||||
- `?` icon near complex features
|
||||
- "Learn more" links in tooltips
|
||||
- Keyboard shortcut hints (`⌘K` shown on search box)
|
||||
|
||||
## Empty State Design
|
||||
|
||||
Every empty state needs:
|
||||
|
||||
### What Will Be Here
|
||||
"Your recent projects will appear here"
|
||||
|
||||
### Why It Matters
|
||||
"Projects help you organize your work and collaborate with your team"
|
||||
|
||||
### How to Get Started
|
||||
[Create project] or [Import from template]
|
||||
|
||||
### Visual Interest
|
||||
Illustration or icon (not just text on blank page)
|
||||
|
||||
### Contextual Help
|
||||
"Need help getting started? [Watch 2-min tutorial]"
|
||||
|
||||
**Empty state types**:
|
||||
- **First use**: Never used this feature (emphasize value, provide template)
|
||||
- **User cleared**: Intentionally deleted everything (light touch, easy to recreate)
|
||||
- **No results**: Search or filter returned nothing (suggest different query, clear filters)
|
||||
- **No permissions**: Can't access (explain why, how to get access)
|
||||
- **Error state**: Failed to load (explain what happened, retry option)
|
||||
|
||||
## Implementation Patterns
|
||||
|
||||
### Technical approaches:
|
||||
|
||||
**Tooltip libraries**: Tippy.js, Popper.js
|
||||
**Tour libraries**: Intro.js, Shepherd.js, React Joyride
|
||||
**Modal patterns**: Focus trap, backdrop, ESC to close
|
||||
**Progress tracking**: LocalStorage for "seen" states
|
||||
**Analytics**: Track completion, drop-off points
|
||||
|
||||
**Storage patterns**:
|
||||
```javascript
|
||||
// Track which onboarding steps user has seen
|
||||
localStorage.setItem('onboarding-completed', 'true');
|
||||
localStorage.setItem('feature-tooltip-seen-reports', 'true');
|
||||
```
|
||||
|
||||
**IMPORTANT**: Don't show same onboarding twice (annoying). Track completion and respect dismissals.
|
||||
|
||||
**NEVER**:
|
||||
- Force users through long onboarding before they can use product
|
||||
- Patronize users with obvious explanations
|
||||
- Show same tooltip repeatedly (respect dismissals)
|
||||
- Block all UI during tour (let users explore)
|
||||
- Create separate tutorial mode disconnected from real product
|
||||
- Overwhelm with information upfront (progressive disclosure!)
|
||||
- Hide "Skip" or make it hard to find
|
||||
- Forget about returning users (don't show initial onboarding again)
|
||||
|
||||
## Verify Onboarding Quality
|
||||
|
||||
Test with real users:
|
||||
|
||||
- **Time to completion**: Can users complete onboarding quickly?
|
||||
- **Comprehension**: Do users understand after completing?
|
||||
- **Action**: Do users take desired next step?
|
||||
- **Skip rate**: Are too many users skipping? (Maybe it's too long/not valuable)
|
||||
- **Completion rate**: Are users completing? (If low, simplify)
|
||||
- **Time to value**: How long until users get first value?
|
||||
|
||||
Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence.
|
||||
@@ -1,268 +0,0 @@
|
||||
---
|
||||
name: optimize
|
||||
description: Improve interface performance across loading speed, rendering, animations, images, and bundle size. Makes experiences faster and smoother.
|
||||
user-invokable: true
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or area to optimize (optional)
|
||||
required: false
|
||||
---
|
||||
|
||||
Identify and fix performance issues to create faster, smoother user experiences.
|
||||
|
||||
## Assess Performance Issues
|
||||
|
||||
Understand current performance and identify problems:
|
||||
|
||||
1. **Measure current state**:
|
||||
- **Core Web Vitals**: LCP, FID/INP, CLS scores
|
||||
- **Load time**: Time to interactive, first contentful paint
|
||||
- **Bundle size**: JavaScript, CSS, image sizes
|
||||
- **Runtime performance**: Frame rate, memory usage, CPU usage
|
||||
- **Network**: Request count, payload sizes, waterfall
|
||||
|
||||
2. **Identify bottlenecks**:
|
||||
- What's slow? (Initial load? Interactions? Animations?)
|
||||
- What's causing it? (Large images? Expensive JavaScript? Layout thrashing?)
|
||||
- How bad is it? (Perceivable? Annoying? Blocking?)
|
||||
- Who's affected? (All users? Mobile only? Slow connections?)
|
||||
|
||||
**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters.
|
||||
|
||||
## Optimization Strategy
|
||||
|
||||
Create systematic improvement plan:
|
||||
|
||||
### Loading Performance
|
||||
|
||||
**Optimize Images**:
|
||||
- Use modern formats (WebP, AVIF)
|
||||
- Proper sizing (don't load 3000px image for 300px display)
|
||||
- Lazy loading for below-fold images
|
||||
- Responsive images (`srcset`, `picture` element)
|
||||
- Compress images (80-85% quality is usually imperceptible)
|
||||
- Use CDN for faster delivery
|
||||
|
||||
```html
|
||||
<img
|
||||
src="hero.webp"
|
||||
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
|
||||
sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
|
||||
loading="lazy"
|
||||
alt="Hero image"
|
||||
/>
|
||||
```
|
||||
|
||||
**Reduce JavaScript Bundle**:
|
||||
- Code splitting (route-based, component-based)
|
||||
- Tree shaking (remove unused code)
|
||||
- Remove unused dependencies
|
||||
- Lazy load non-critical code
|
||||
- Use dynamic imports for large components
|
||||
|
||||
```javascript
|
||||
// Lazy load heavy component
|
||||
const HeavyChart = lazy(() => import('./HeavyChart'));
|
||||
```
|
||||
|
||||
**Optimize CSS**:
|
||||
- Remove unused CSS
|
||||
- Critical CSS inline, rest async
|
||||
- Minimize CSS files
|
||||
- Use CSS containment for independent regions
|
||||
|
||||
**Optimize Fonts**:
|
||||
- Use `font-display: swap` or `optional`
|
||||
- Subset fonts (only characters you need)
|
||||
- Preload critical fonts
|
||||
- Use system fonts when appropriate
|
||||
- Limit font weights loaded
|
||||
|
||||
```css
|
||||
@font-face {
|
||||
font-family: 'CustomFont';
|
||||
src: url('/fonts/custom.woff2') format('woff2');
|
||||
font-display: swap; /* Show fallback immediately */
|
||||
unicode-range: U+0020-007F; /* Basic Latin only */
|
||||
}
|
||||
```
|
||||
|
||||
**Optimize Loading Strategy**:
|
||||
- Critical resources first (async/defer non-critical)
|
||||
- Preload critical assets
|
||||
- Prefetch likely next pages
|
||||
- Service worker for offline/caching
|
||||
- HTTP/2 or HTTP/3 for multiplexing
|
||||
|
||||
### Rendering Performance
|
||||
|
||||
**Avoid Layout Thrashing**:
|
||||
```javascript
|
||||
// ❌ Bad: Alternating reads and writes (causes reflows)
|
||||
elements.forEach(el => {
|
||||
const height = el.offsetHeight; // Read (forces layout)
|
||||
el.style.height = height * 2; // Write
|
||||
});
|
||||
|
||||
// ✅ Good: Batch reads, then batch writes
|
||||
const heights = elements.map(el => el.offsetHeight); // All reads
|
||||
elements.forEach((el, i) => {
|
||||
el.style.height = heights[i] * 2; // All writes
|
||||
});
|
||||
```
|
||||
|
||||
**Optimize Rendering**:
|
||||
- Use CSS `contain` property for independent regions
|
||||
- Minimize DOM depth (flatter is faster)
|
||||
- Reduce DOM size (fewer elements)
|
||||
- Use `content-visibility: auto` for long lists
|
||||
- Virtual scrolling for very long lists (react-window, react-virtualized)
|
||||
|
||||
**Reduce Paint & Composite**:
|
||||
- Use `transform` and `opacity` for animations (GPU-accelerated)
|
||||
- Avoid animating layout properties (width, height, top, left)
|
||||
- Use `will-change` sparingly for known expensive operations
|
||||
- Minimize paint areas (smaller is faster)
|
||||
|
||||
### Animation Performance
|
||||
|
||||
**GPU Acceleration**:
|
||||
```css
|
||||
/* ✅ GPU-accelerated (fast) */
|
||||
.animated {
|
||||
transform: translateX(100px);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ❌ CPU-bound (slow) */
|
||||
.animated {
|
||||
left: 100px;
|
||||
width: 300px;
|
||||
}
|
||||
```
|
||||
|
||||
**Smooth 60fps**:
|
||||
- Target 16ms per frame (60fps)
|
||||
- Use `requestAnimationFrame` for JS animations
|
||||
- Debounce/throttle scroll handlers
|
||||
- Use CSS animations when possible
|
||||
- Avoid long-running JavaScript during animations
|
||||
|
||||
**Intersection Observer**:
|
||||
```javascript
|
||||
// Efficiently detect when elements enter viewport
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
// Element is visible, lazy load or animate
|
||||
}
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
### React/Framework Optimization
|
||||
|
||||
**React-specific**:
|
||||
- Use `memo()` for expensive components
|
||||
- `useMemo()` and `useCallback()` for expensive computations
|
||||
- Virtualize long lists
|
||||
- Code split routes
|
||||
- Avoid inline function creation in render
|
||||
- Use React DevTools Profiler
|
||||
|
||||
**Framework-agnostic**:
|
||||
- Minimize re-renders
|
||||
- Debounce expensive operations
|
||||
- Memoize computed values
|
||||
- Lazy load routes and components
|
||||
|
||||
### Network Optimization
|
||||
|
||||
**Reduce Requests**:
|
||||
- Combine small files
|
||||
- Use SVG sprites for icons
|
||||
- Inline small critical assets
|
||||
- Remove unused third-party scripts
|
||||
|
||||
**Optimize APIs**:
|
||||
- Use pagination (don't load everything)
|
||||
- GraphQL to request only needed fields
|
||||
- Response compression (gzip, brotli)
|
||||
- HTTP caching headers
|
||||
- CDN for static assets
|
||||
|
||||
**Optimize for Slow Connections**:
|
||||
- Adaptive loading based on connection (navigator.connection)
|
||||
- Optimistic UI updates
|
||||
- Request prioritization
|
||||
- Progressive enhancement
|
||||
|
||||
## Core Web Vitals Optimization
|
||||
|
||||
### Largest Contentful Paint (LCP < 2.5s)
|
||||
- Optimize hero images
|
||||
- Inline critical CSS
|
||||
- Preload key resources
|
||||
- Use CDN
|
||||
- Server-side rendering
|
||||
|
||||
### First Input Delay (FID < 100ms) / INP (< 200ms)
|
||||
- Break up long tasks
|
||||
- Defer non-critical JavaScript
|
||||
- Use web workers for heavy computation
|
||||
- Reduce JavaScript execution time
|
||||
|
||||
### Cumulative Layout Shift (CLS < 0.1)
|
||||
- Set dimensions on images and videos
|
||||
- Don't inject content above existing content
|
||||
- Use `aspect-ratio` CSS property
|
||||
- Reserve space for ads/embeds
|
||||
- Avoid animations that cause layout shifts
|
||||
|
||||
```css
|
||||
/* Reserve space for image */
|
||||
.image-container {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
```
|
||||
|
||||
## Performance Monitoring
|
||||
|
||||
**Tools to use**:
|
||||
- Chrome DevTools (Lighthouse, Performance panel)
|
||||
- WebPageTest
|
||||
- Core Web Vitals (Chrome UX Report)
|
||||
- Bundle analyzers (webpack-bundle-analyzer)
|
||||
- Performance monitoring (Sentry, DataDog, New Relic)
|
||||
|
||||
**Key metrics**:
|
||||
- LCP, FID/INP, CLS (Core Web Vitals)
|
||||
- Time to Interactive (TTI)
|
||||
- First Contentful Paint (FCP)
|
||||
- Total Blocking Time (TBT)
|
||||
- Bundle size
|
||||
- Request count
|
||||
|
||||
**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative.
|
||||
|
||||
**NEVER**:
|
||||
- Optimize without measuring (premature optimization)
|
||||
- Sacrifice accessibility for performance
|
||||
- Break functionality while optimizing
|
||||
- Use `will-change` everywhere (creates new layers, uses memory)
|
||||
- Lazy load above-fold content
|
||||
- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first)
|
||||
- Forget about mobile performance (often slower devices, slower connections)
|
||||
|
||||
## Verify Improvements
|
||||
|
||||
Test that optimizations worked:
|
||||
|
||||
- **Before/after metrics**: Compare Lighthouse scores
|
||||
- **Real user monitoring**: Track improvements for real users
|
||||
- **Different devices**: Test on low-end Android, not just flagship iPhone
|
||||
- **Slow connections**: Throttle to 3G, test experience
|
||||
- **No regressions**: Ensure functionality still works
|
||||
- **User perception**: Does it *feel* faster?
|
||||
|
||||
Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance.
|
||||
@@ -1,139 +0,0 @@
|
||||
---
|
||||
name: paperclip-create-agent
|
||||
description: >
|
||||
Create new agents in Paperclip with governance-aware hiring. Use when you need
|
||||
to inspect adapter configuration options, compare existing agent configs,
|
||||
draft a new agent prompt/config, and submit a hire request.
|
||||
---
|
||||
|
||||
# Paperclip Create Agent Skill
|
||||
|
||||
Use this skill when you are asked to hire/create an agent.
|
||||
|
||||
## Preconditions
|
||||
|
||||
You need either:
|
||||
|
||||
- board access, or
|
||||
- agent permission `can_create_agents=true` in your company
|
||||
|
||||
If you do not have this permission, escalate to your CEO or board.
|
||||
|
||||
## Workflow
|
||||
|
||||
1. Confirm identity and company context.
|
||||
|
||||
```sh
|
||||
curl -sS "$PAPERCLIP_API_URL/api/agents/me" \
|
||||
-H "Authorization: Bearer $PAPERCLIP_API_KEY"
|
||||
```
|
||||
|
||||
2. Discover available adapter configuration docs for this Paperclip instance.
|
||||
|
||||
```sh
|
||||
curl -sS "$PAPERCLIP_API_URL/llms/agent-configuration.txt" \
|
||||
-H "Authorization: Bearer $PAPERCLIP_API_KEY"
|
||||
```
|
||||
|
||||
3. Read adapter-specific docs (example: `claude_local`).
|
||||
|
||||
```sh
|
||||
curl -sS "$PAPERCLIP_API_URL/llms/agent-configuration/claude_local.txt" \
|
||||
-H "Authorization: Bearer $PAPERCLIP_API_KEY"
|
||||
```
|
||||
|
||||
4. Compare existing agent configurations in your company.
|
||||
|
||||
```sh
|
||||
curl -sS "$PAPERCLIP_API_URL/api/companies/$PAPERCLIP_COMPANY_ID/agent-configurations" \
|
||||
-H "Authorization: Bearer $PAPERCLIP_API_KEY"
|
||||
```
|
||||
|
||||
5. Discover allowed agent icons and pick one that matches the role.
|
||||
|
||||
```sh
|
||||
curl -sS "$PAPERCLIP_API_URL/llms/agent-icons.txt" \
|
||||
-H "Authorization: Bearer $PAPERCLIP_API_KEY"
|
||||
```
|
||||
|
||||
6. Draft the new hire config:
|
||||
- role/title/name
|
||||
- icon (required in practice; use one from `/llms/agent-icons.txt`)
|
||||
- reporting line (`reportsTo`)
|
||||
- adapter type
|
||||
- adapter and runtime config aligned to this environment
|
||||
- capabilities
|
||||
- run prompt in adapter config (`promptTemplate` where applicable)
|
||||
- source issue linkage (`sourceIssueId` or `sourceIssueIds`) when this hire came from an issue
|
||||
|
||||
7. Submit hire request.
|
||||
|
||||
```sh
|
||||
curl -sS -X POST "$PAPERCLIP_API_URL/api/companies/$PAPERCLIP_COMPANY_ID/agent-hires" \
|
||||
-H "Authorization: Bearer $PAPERCLIP_API_KEY" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"name": "CTO",
|
||||
"role": "cto",
|
||||
"title": "Chief Technology Officer",
|
||||
"icon": "crown",
|
||||
"reportsTo": "<ceo-agent-id>",
|
||||
"capabilities": "Owns technical roadmap, architecture, staffing, execution",
|
||||
"adapterType": "codex_local",
|
||||
"adapterConfig": {"cwd": "/abs/path/to/repo", "model": "o4-mini"},
|
||||
"runtimeConfig": {"heartbeat": {"enabled": true, "intervalSec": 300, "wakeOnDemand": true}},
|
||||
"sourceIssueId": "<issue-id>"
|
||||
}'
|
||||
```
|
||||
|
||||
8. Handle governance state:
|
||||
- if response has `approval`, hire is `pending_approval`
|
||||
- monitor and discuss on approval thread
|
||||
- when the board approves, you will be woken with `PAPERCLIP_APPROVAL_ID`; read linked issues and close/comment follow-up
|
||||
|
||||
```sh
|
||||
curl -sS "$PAPERCLIP_API_URL/api/approvals/<approval-id>" \
|
||||
-H "Authorization: Bearer $PAPERCLIP_API_KEY"
|
||||
|
||||
curl -sS -X POST "$PAPERCLIP_API_URL/api/approvals/<approval-id>/comments" \
|
||||
-H "Authorization: Bearer $PAPERCLIP_API_KEY" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"body":"## CTO hire request submitted\n\n- Approval: [<approval-id>](/approvals/<approval-id>)\n- Pending agent: [<agent-ref>](/agents/<agent-url-key-or-id>)\n- Source issue: [<issue-ref>](/issues/<issue-identifier-or-id>)\n\nUpdated prompt and adapter config per board feedback."}'
|
||||
```
|
||||
|
||||
If the approval already exists and needs manual linking to the issue:
|
||||
|
||||
```sh
|
||||
curl -sS -X POST "$PAPERCLIP_API_URL/api/issues/<issue-id>/approvals" \
|
||||
-H "Authorization: Bearer $PAPERCLIP_API_KEY" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"approvalId":"<approval-id>"}'
|
||||
```
|
||||
|
||||
After approval is granted, run this follow-up loop:
|
||||
|
||||
```sh
|
||||
curl -sS "$PAPERCLIP_API_URL/api/approvals/$PAPERCLIP_APPROVAL_ID" \
|
||||
-H "Authorization: Bearer $PAPERCLIP_API_KEY"
|
||||
|
||||
curl -sS "$PAPERCLIP_API_URL/api/approvals/$PAPERCLIP_APPROVAL_ID/issues" \
|
||||
-H "Authorization: Bearer $PAPERCLIP_API_KEY"
|
||||
```
|
||||
|
||||
For each linked issue, either:
|
||||
- close it if approval resolved the request, or
|
||||
- comment in markdown with links to the approval and next actions.
|
||||
|
||||
## Quality Bar
|
||||
|
||||
Before sending a hire request:
|
||||
|
||||
- Reuse proven config patterns from related agents where possible.
|
||||
- Set a concrete `icon` from `/llms/agent-icons.txt` so the new hire is identifiable in org and task views.
|
||||
- Avoid secrets in plain text unless required by adapter behavior.
|
||||
- Ensure reporting line is correct and in-company.
|
||||
- Ensure prompt is role-specific and operationally scoped.
|
||||
- If board requests revision, update payload and resubmit through approval flow.
|
||||
|
||||
For endpoint payload shapes and full examples, read:
|
||||
`skills/paperclip-create-agent/references/api-reference.md`
|
||||
@@ -1,95 +0,0 @@
|
||||
# Paperclip Create Agent API Reference
|
||||
|
||||
## Core Endpoints
|
||||
|
||||
- `GET /llms/agent-configuration.txt`
|
||||
- `GET /llms/agent-configuration/:adapterType.txt`
|
||||
- `GET /llms/agent-icons.txt`
|
||||
- `GET /api/companies/:companyId/agent-configurations`
|
||||
- `GET /api/agents/:agentId/configuration`
|
||||
- `POST /api/companies/:companyId/agent-hires`
|
||||
- `GET /api/agents/:agentId/config-revisions`
|
||||
- `POST /api/agents/:agentId/config-revisions/:revisionId/rollback`
|
||||
- `POST /api/issues/:issueId/approvals`
|
||||
- `GET /api/approvals/:approvalId/issues`
|
||||
|
||||
Approval collaboration:
|
||||
|
||||
- `GET /api/approvals/:approvalId`
|
||||
- `POST /api/approvals/:approvalId/request-revision` (board)
|
||||
- `POST /api/approvals/:approvalId/resubmit`
|
||||
- `GET /api/approvals/:approvalId/comments`
|
||||
- `POST /api/approvals/:approvalId/comments`
|
||||
- `GET /api/approvals/:approvalId/issues`
|
||||
|
||||
## `POST /api/companies/:companyId/agent-hires`
|
||||
|
||||
Request body matches agent create shape:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "CTO",
|
||||
"role": "cto",
|
||||
"title": "Chief Technology Officer",
|
||||
"icon": "crown",
|
||||
"reportsTo": "uuid-or-null",
|
||||
"capabilities": "Owns architecture and engineering execution",
|
||||
"adapterType": "claude_local",
|
||||
"adapterConfig": {
|
||||
"cwd": "/absolute/path",
|
||||
"model": "claude-sonnet-4-5-20250929",
|
||||
"promptTemplate": "You are CTO..."
|
||||
},
|
||||
"runtimeConfig": {
|
||||
"heartbeat": {
|
||||
"enabled": true,
|
||||
"intervalSec": 300,
|
||||
"wakeOnDemand": true
|
||||
}
|
||||
},
|
||||
"budgetMonthlyCents": 0,
|
||||
"sourceIssueId": "uuid-or-null",
|
||||
"sourceIssueIds": ["uuid-1", "uuid-2"]
|
||||
}
|
||||
```
|
||||
|
||||
Response:
|
||||
|
||||
```json
|
||||
{
|
||||
"agent": {
|
||||
"id": "uuid",
|
||||
"status": "pending_approval"
|
||||
},
|
||||
"approval": {
|
||||
"id": "uuid",
|
||||
"type": "hire_agent",
|
||||
"status": "pending"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
If company setting disables required approval, `approval` is `null` and the agent is created as `idle`.
|
||||
|
||||
## Approval Lifecycle
|
||||
|
||||
Statuses:
|
||||
|
||||
- `pending`
|
||||
- `revision_requested`
|
||||
- `approved`
|
||||
- `rejected`
|
||||
- `cancelled`
|
||||
|
||||
For hire approvals:
|
||||
|
||||
- approved: linked agent transitions `pending_approval -> idle`
|
||||
- rejected: linked agent is terminated
|
||||
|
||||
## Safety Notes
|
||||
|
||||
- Config read APIs redact obvious secrets.
|
||||
- `pending_approval` agents cannot run heartbeats, receive assignments, or create keys.
|
||||
- All actions are logged in activity for auditability.
|
||||
- Use markdown in issue/approval comments and include links to approval, agent, and source issue.
|
||||
- After approval resolution, requester may be woken with `PAPERCLIP_APPROVAL_ID` and should reconcile linked issues.
|
||||
@@ -1,101 +0,0 @@
|
||||
---
|
||||
name: paperclip-create-plugin
|
||||
description: >
|
||||
Create new Paperclip plugins with the current alpha SDK/runtime. Use when
|
||||
scaffolding a plugin package, adding a new example plugin, or updating plugin
|
||||
authoring docs. Covers the supported worker/UI surface, route conventions,
|
||||
scaffold flow, and verification steps.
|
||||
---
|
||||
|
||||
# Create a Paperclip Plugin
|
||||
|
||||
Use this skill when the task is to create, scaffold, or document a Paperclip plugin.
|
||||
|
||||
## 1. Ground rules
|
||||
|
||||
Read these first when needed:
|
||||
|
||||
1. `doc/plugins/PLUGIN_AUTHORING_GUIDE.md`
|
||||
2. `packages/plugins/sdk/README.md`
|
||||
3. `doc/plugins/PLUGIN_SPEC.md` only for future-looking context
|
||||
|
||||
Current runtime assumptions:
|
||||
|
||||
- plugin workers are trusted code
|
||||
- plugin UI is trusted same-origin host code
|
||||
- worker APIs are capability-gated
|
||||
- plugin UI is not sandboxed by manifest capabilities
|
||||
- no host-provided shared plugin UI component kit yet
|
||||
- `ctx.assets` is not supported in the current runtime
|
||||
|
||||
## 2. Preferred workflow
|
||||
|
||||
Use the scaffold package instead of hand-writing the boilerplate:
|
||||
|
||||
```bash
|
||||
pnpm --filter @paperclipai/create-paperclip-plugin build
|
||||
node packages/plugins/create-paperclip-plugin/dist/index.js <npm-package-name> --output <target-dir>
|
||||
```
|
||||
|
||||
For a plugin that lives outside the Paperclip repo, pass `--sdk-path` and let the scaffold snapshot the local SDK/shared packages into `.paperclip-sdk/`:
|
||||
|
||||
```bash
|
||||
pnpm --filter @paperclipai/create-paperclip-plugin build
|
||||
node packages/plugins/create-paperclip-plugin/dist/index.js @acme/plugin-name \
|
||||
--output /absolute/path/to/plugin-repos \
|
||||
--sdk-path /absolute/path/to/paperclip/packages/plugins/sdk
|
||||
```
|
||||
|
||||
Recommended target inside this repo:
|
||||
|
||||
- `packages/plugins/examples/` for example plugins
|
||||
- another `packages/plugins/<name>/` folder if it is becoming a real package
|
||||
|
||||
## 3. After scaffolding
|
||||
|
||||
Check and adjust:
|
||||
|
||||
- `src/manifest.ts`
|
||||
- `src/worker.ts`
|
||||
- `src/ui/index.tsx`
|
||||
- `tests/plugin.spec.ts`
|
||||
- `package.json`
|
||||
|
||||
Make sure the plugin:
|
||||
|
||||
- declares only supported capabilities
|
||||
- does not use `ctx.assets`
|
||||
- does not import host UI component stubs
|
||||
- keeps UI self-contained
|
||||
- uses `routePath` only on `page` slots
|
||||
- is installed into Paperclip from an absolute local path during development
|
||||
|
||||
## 4. If the plugin should appear in the app
|
||||
|
||||
For bundled example/discoverable behavior, update the relevant host wiring:
|
||||
|
||||
- bundled example list in `server/src/routes/plugins.ts`
|
||||
- any docs that list in-repo examples
|
||||
|
||||
Only do this if the user wants the plugin surfaced as a bundled example.
|
||||
|
||||
## 5. Verification
|
||||
|
||||
Always run:
|
||||
|
||||
```bash
|
||||
pnpm --filter <plugin-package> typecheck
|
||||
pnpm --filter <plugin-package> test
|
||||
pnpm --filter <plugin-package> build
|
||||
```
|
||||
|
||||
If you changed SDK/host/plugin runtime code too, also run broader repo checks as appropriate.
|
||||
|
||||
## 6. Documentation expectations
|
||||
|
||||
When authoring or updating plugin docs:
|
||||
|
||||
- distinguish current implementation from future spec ideas
|
||||
- be explicit about the trusted-code model
|
||||
- do not promise host UI components or asset APIs
|
||||
- prefer npm-package deployment guidance over repo-local workflows for production
|
||||
@@ -1,291 +0,0 @@
|
||||
---
|
||||
name: paperclip
|
||||
description: >
|
||||
Interact with the Paperclip control plane API to manage tasks, coordinate with
|
||||
other agents, and follow company governance. Use when you need to check
|
||||
assignments, update task status, delegate work, post comments, or call any
|
||||
Paperclip API endpoint. Do NOT use for the actual domain work itself (writing
|
||||
code, research, etc.) — only for Paperclip coordination.
|
||||
---
|
||||
|
||||
# Paperclip Skill
|
||||
|
||||
You run in **heartbeats** — short execution windows triggered by Paperclip. Each heartbeat, you wake up, check your work, do something useful, and exit. You do not run continuously.
|
||||
|
||||
## Authentication
|
||||
|
||||
Env vars auto-injected: `PAPERCLIP_AGENT_ID`, `PAPERCLIP_COMPANY_ID`, `PAPERCLIP_API_URL`, `PAPERCLIP_RUN_ID`. Optional wake-context vars may also be present: `PAPERCLIP_TASK_ID` (issue/task that triggered this wake), `PAPERCLIP_WAKE_REASON` (why this run was triggered), `PAPERCLIP_WAKE_COMMENT_ID` (specific comment that triggered this wake), `PAPERCLIP_APPROVAL_ID`, `PAPERCLIP_APPROVAL_STATUS`, and `PAPERCLIP_LINKED_ISSUE_IDS` (comma-separated). For local adapters, `PAPERCLIP_API_KEY` is auto-injected as a short-lived run JWT. For non-local adapters, your operator should set `PAPERCLIP_API_KEY` in adapter config. All requests use `Authorization: Bearer $PAPERCLIP_API_KEY`. All endpoints under `/api`, all JSON. Never hard-code the API URL.
|
||||
|
||||
Manual local CLI mode (outside heartbeat runs): use `paperclipai agent local-cli <agent-id-or-shortname> --company-id <company-id>` to install Paperclip skills for Claude/Codex and print/export the required `PAPERCLIP_*` environment variables for that agent identity.
|
||||
|
||||
**Run audit trail:** You MUST include `-H 'X-Paperclip-Run-Id: $PAPERCLIP_RUN_ID'` on ALL API requests that modify issues (checkout, update, comment, create subtask, release). This links your actions to the current heartbeat run for traceability.
|
||||
|
||||
## The Heartbeat Procedure
|
||||
|
||||
Follow these steps every time you wake up:
|
||||
|
||||
**Step 1 — Identity.** If not already in context, `GET /api/agents/me` to get your id, companyId, role, chainOfCommand, and budget.
|
||||
|
||||
**Step 2 — Approval follow-up (when triggered).** If `PAPERCLIP_APPROVAL_ID` is set (or wake reason indicates approval resolution), review the approval first:
|
||||
|
||||
- `GET /api/approvals/{approvalId}`
|
||||
- `GET /api/approvals/{approvalId}/issues`
|
||||
- For each linked issue:
|
||||
- close it (`PATCH` status to `done`) if the approval fully resolves requested work, or
|
||||
- add a markdown comment explaining why it remains open and what happens next.
|
||||
Always include links to the approval and issue in that comment.
|
||||
|
||||
**Step 3 — Get assignments.** `GET /api/companies/{companyId}/issues?assigneeAgentId={your-agent-id}&status=todo,in_progress,blocked`. Results sorted by priority. This is your inbox.
|
||||
|
||||
**Step 4 — Pick work (with mention exception).** Work on `in_progress` first, then `todo`. Skip `blocked` unless you can unblock it.
|
||||
**Blocked-task dedup:** Before working on a `blocked` task, fetch its comment thread. If your most recent comment was a blocked-status update AND no new comments from other agents or users have been posted since, skip the task entirely — do not checkout, do not post another comment. Exit the heartbeat (or move to the next task) instead. Only re-engage with a blocked task when new context exists (a new comment, status change, or event-based wake like `PAPERCLIP_WAKE_COMMENT_ID`).
|
||||
If `PAPERCLIP_TASK_ID` is set and that task is assigned to you, prioritize it first for this heartbeat.
|
||||
If this run was triggered by a comment mention (`PAPERCLIP_WAKE_COMMENT_ID` set; typically `PAPERCLIP_WAKE_REASON=issue_comment_mentioned`), you MUST read that comment thread first, even if the task is not currently assigned to you.
|
||||
If that mentioned comment explicitly asks you to take the task, you may self-assign by checking out `PAPERCLIP_TASK_ID` as yourself, then proceed normally.
|
||||
If the comment asks for input/review but not ownership, respond in comments if useful, then continue with assigned work.
|
||||
If the comment does not direct you to take ownership, do not self-assign.
|
||||
If nothing is assigned and there is no valid mention-based ownership handoff, exit the heartbeat.
|
||||
|
||||
**Step 5 — Checkout.** You MUST checkout before doing any work. Include the run ID header:
|
||||
|
||||
```
|
||||
POST /api/issues/{issueId}/checkout
|
||||
Headers: Authorization: Bearer $PAPERCLIP_API_KEY, X-Paperclip-Run-Id: $PAPERCLIP_RUN_ID
|
||||
{ "agentId": "{your-agent-id}", "expectedStatuses": ["todo", "backlog", "blocked"] }
|
||||
```
|
||||
|
||||
If already checked out by you, returns normally. If owned by another agent: `409 Conflict` — stop, pick a different task. **Never retry a 409.**
|
||||
|
||||
**Step 6 — Understand context.** `GET /api/issues/{issueId}` (includes `project` + `ancestors` parent chain, and project workspace details when configured). `GET /api/issues/{issueId}/comments`. Read ancestors to understand _why_ this task exists.
|
||||
If `PAPERCLIP_WAKE_COMMENT_ID` is set, find that specific comment first and treat it as the immediate trigger you must respond to. Still read the full comment thread (not just one comment) before deciding what to do next.
|
||||
|
||||
**Step 7 — Do the work.** Use your tools and capabilities.
|
||||
|
||||
**Step 8 — Update status and communicate.** Always include the run ID header.
|
||||
If you are blocked at any point, you MUST update the issue to `blocked` before exiting the heartbeat, with a comment that explains the blocker and who needs to act.
|
||||
|
||||
```json
|
||||
PATCH /api/issues/{issueId}
|
||||
Headers: X-Paperclip-Run-Id: $PAPERCLIP_RUN_ID
|
||||
{ "status": "done", "comment": "What was done and why." }
|
||||
|
||||
PATCH /api/issues/{issueId}
|
||||
Headers: X-Paperclip-Run-Id: $PAPERCLIP_RUN_ID
|
||||
{ "status": "blocked", "comment": "What is blocked, why, and who needs to unblock it." }
|
||||
```
|
||||
|
||||
Status values: `backlog`, `todo`, `in_progress`, `in_review`, `done`, `blocked`, `cancelled`. Priority values: `critical`, `high`, `medium`, `low`. Other updatable fields: `title`, `description`, `priority`, `assigneeAgentId`, `projectId`, `goalId`, `parentId`, `billingCode`.
|
||||
|
||||
**Step 9 — Delegate if needed.** Create subtasks with `POST /api/companies/{companyId}/issues`. Always set `parentId` and `goalId`. Set `billingCode` for cross-team work.
|
||||
|
||||
## Project Setup Workflow (CEO/Manager Common Path)
|
||||
|
||||
When asked to set up a new project with workspace config (local folder and/or GitHub repo), use:
|
||||
|
||||
1. `POST /api/companies/{companyId}/projects` with project fields.
|
||||
2. Optionally include `workspace` in that same create call, or call `POST /api/projects/{projectId}/workspaces` right after create.
|
||||
|
||||
Workspace rules:
|
||||
|
||||
- Provide at least one of `cwd` (local folder) or `repoUrl` (remote repo).
|
||||
- For repo-only setup, omit `cwd` and provide `repoUrl`.
|
||||
- Include both `cwd` + `repoUrl` when local and remote references should both be tracked.
|
||||
|
||||
## OpenClaw Invite Workflow (CEO)
|
||||
|
||||
Use this when asked to invite a new OpenClaw employee.
|
||||
|
||||
1. Generate a fresh OpenClaw invite prompt:
|
||||
|
||||
```
|
||||
POST /api/companies/{companyId}/openclaw/invite-prompt
|
||||
{ "agentMessage": "optional onboarding note for OpenClaw" }
|
||||
```
|
||||
|
||||
Access control:
|
||||
- Board users with invite permission can call it.
|
||||
- Agent callers: only the company CEO agent can call it.
|
||||
|
||||
2. Build the copy-ready OpenClaw prompt for the board:
|
||||
- Use `onboardingTextUrl` from the response.
|
||||
- Ask the board to paste that prompt into OpenClaw.
|
||||
- If the issue includes an OpenClaw URL (for example `ws://127.0.0.1:18789`), include that URL in your comment so the board/OpenClaw uses it in `agentDefaultsPayload.url`.
|
||||
|
||||
3. Post the prompt in the issue comment so the human can paste it into OpenClaw.
|
||||
|
||||
4. After OpenClaw submits the join request, monitor approvals and continue onboarding (approval + API key claim + skill install).
|
||||
|
||||
## Critical Rules
|
||||
|
||||
- **Always checkout** before working. Never PATCH to `in_progress` manually.
|
||||
- **Never retry a 409.** The task belongs to someone else.
|
||||
- **Never look for unassigned work.**
|
||||
- **Self-assign only for explicit @-mention handoff.** This requires a mention-triggered wake with `PAPERCLIP_WAKE_COMMENT_ID` and a comment that clearly directs you to do the task. Use checkout (never direct assignee patch). Otherwise, no assignments = exit.
|
||||
- **Honor "send it back to me" requests from board users.** If a board/user asks for review handoff (e.g. "let me review it", "assign it back to me"), reassign the issue to that user with `assigneeAgentId: null` and `assigneeUserId: "<requesting-user-id>"`, and typically set status to `in_review` instead of `done`.
|
||||
Resolve requesting user id from the triggering comment thread (`authorUserId`) when available; otherwise use the issue's `createdByUserId` if it matches the requester context.
|
||||
- **Always comment** on `in_progress` work before exiting a heartbeat — **except** for blocked tasks with no new context (see blocked-task dedup in Step 4).
|
||||
- **Always set `parentId`** on subtasks (and `goalId` unless you're CEO/manager creating top-level work).
|
||||
- **Never cancel cross-team tasks.** Reassign to your manager with a comment.
|
||||
- **Always update blocked issues explicitly.** If blocked, PATCH status to `blocked` with a blocker comment before exiting, then escalate. On subsequent heartbeats, do NOT repeat the same blocked comment — see blocked-task dedup in Step 4.
|
||||
- **@-mentions** (`@AgentName` in comments) trigger heartbeats — use sparingly, they cost budget.
|
||||
- **Budget**: auto-paused at 100%. Above 80%, focus on critical tasks only.
|
||||
- **Escalate** via `chainOfCommand` when stuck. Reassign to manager or create a task for them.
|
||||
- **Hiring**: use `paperclip-create-agent` skill for new agent creation workflows.
|
||||
|
||||
## Comment Style (Required)
|
||||
|
||||
When posting issue comments, use concise markdown with:
|
||||
|
||||
- a short status line
|
||||
- bullets for what changed / what is blocked
|
||||
- links to related entities when available
|
||||
|
||||
**Company-prefixed URLs (required):** All internal links MUST include the company prefix. Derive the prefix from any issue identifier you have (e.g., `PAP-315` → prefix is `PAP`). Use this prefix in all UI links:
|
||||
|
||||
- Issues: `/<prefix>/issues/<issue-identifier>` (e.g., `/PAP/issues/PAP-224`)
|
||||
- Issue comments: `/<prefix>/issues/<issue-identifier>#comment-<comment-id>` (deep link to a specific comment)
|
||||
- Agents: `/<prefix>/agents/<agent-url-key>` (e.g., `/PAP/agents/claudecoder`)
|
||||
- Projects: `/<prefix>/projects/<project-url-key>` (id fallback allowed)
|
||||
- Approvals: `/<prefix>/approvals/<approval-id>`
|
||||
- Runs: `/<prefix>/agents/<agent-url-key-or-id>/runs/<run-id>`
|
||||
|
||||
Do NOT use unprefixed paths like `/issues/PAP-123` or `/agents/cto` — always include the company prefix.
|
||||
|
||||
Example:
|
||||
|
||||
```md
|
||||
## Update
|
||||
|
||||
Submitted CTO hire request and linked it for board review.
|
||||
|
||||
- Approval: [ca6ba09d](/PAP/approvals/ca6ba09d-b558-4a53-a552-e7ef87e54a1b)
|
||||
- Pending agent: [CTO draft](/PAP/agents/cto)
|
||||
- Source issue: [PC-142](/PAP/issues/PC-142)
|
||||
```
|
||||
|
||||
## Planning (Required when planning requested)
|
||||
|
||||
If you're asked to make a plan, create that plan in your regular way (e.g. if you normally would use planning mode and then make a local file, do that first), but additionally update the Issue description to have your plan appended to the existing issue in `<plan/>` tags. You MUST keep the original Issue description exactly in tact. ONLY add/edit your plan. If you're asked for plan revisions, update your `<plan/>` with the revision. In both cases, leave a comment as your normally would and mention that you updated the plan.
|
||||
|
||||
If you're asked to make a plan, _do not mark the issue as done_. Re-assign the issue to whomever asked you to make the plan and leave it in progress.
|
||||
|
||||
Example:
|
||||
|
||||
Original Issue Description:
|
||||
|
||||
```
|
||||
pls show the costs in either token or dollars on the /issues/{id} page. Make a plan first.
|
||||
```
|
||||
|
||||
After:
|
||||
|
||||
```
|
||||
pls show the costs in either token or dollars on the /issues/{id} page. Make a plan first.
|
||||
|
||||
<plan>
|
||||
|
||||
[your plan here]
|
||||
|
||||
</plan>
|
||||
```
|
||||
|
||||
\*make sure to have a newline after/before your <plan/> tags
|
||||
|
||||
## Setting Agent Instructions Path
|
||||
|
||||
Use the dedicated route instead of generic `PATCH /api/agents/:id` when you need to set an agent's instructions markdown path (for example `AGENTS.md`).
|
||||
|
||||
```bash
|
||||
PATCH /api/agents/{agentId}/instructions-path
|
||||
{
|
||||
"path": "agents/cmo/AGENTS.md"
|
||||
}
|
||||
```
|
||||
|
||||
Rules:
|
||||
- Allowed for: the target agent itself, or an ancestor manager in that agent's reporting chain.
|
||||
- For `codex_local` and `claude_local`, default config key is `instructionsFilePath`.
|
||||
- Relative paths are resolved against the target agent's `adapterConfig.cwd`; absolute paths are accepted as-is.
|
||||
- To clear the path, send `{ "path": null }`.
|
||||
- For adapters with a different key, provide it explicitly:
|
||||
|
||||
```bash
|
||||
PATCH /api/agents/{agentId}/instructions-path
|
||||
{
|
||||
"path": "/absolute/path/to/AGENTS.md",
|
||||
"adapterConfigKey": "yourAdapterSpecificPathField"
|
||||
}
|
||||
```
|
||||
|
||||
## Key Endpoints (Quick Reference)
|
||||
|
||||
| Action | Endpoint |
|
||||
| -------------------- | ------------------------------------------------------------------------------------------ |
|
||||
| My identity | `GET /api/agents/me` |
|
||||
| My assignments | `GET /api/companies/:companyId/issues?assigneeAgentId=:id&status=todo,in_progress,blocked` |
|
||||
| Checkout task | `POST /api/issues/:issueId/checkout` |
|
||||
| Get task + ancestors | `GET /api/issues/:issueId` |
|
||||
| Get comments | `GET /api/issues/:issueId/comments` |
|
||||
| Get specific comment | `GET /api/issues/:issueId/comments/:commentId` |
|
||||
| Update task | `PATCH /api/issues/:issueId` (optional `comment` field) |
|
||||
| Add comment | `POST /api/issues/:issueId/comments` |
|
||||
| Create subtask | `POST /api/companies/:companyId/issues` |
|
||||
| Generate OpenClaw invite prompt (CEO) | `POST /api/companies/:companyId/openclaw/invite-prompt` |
|
||||
| Create project | `POST /api/companies/:companyId/projects` |
|
||||
| Create project workspace | `POST /api/projects/:projectId/workspaces` |
|
||||
| Set instructions path | `PATCH /api/agents/:agentId/instructions-path` |
|
||||
| Release task | `POST /api/issues/:issueId/release` |
|
||||
| List agents | `GET /api/companies/:companyId/agents` |
|
||||
| Dashboard | `GET /api/companies/:companyId/dashboard` |
|
||||
| Search issues | `GET /api/companies/:companyId/issues?q=search+term` |
|
||||
|
||||
## Searching Issues
|
||||
|
||||
Use the `q` query parameter on the issues list endpoint to search across titles, identifiers, descriptions, and comments:
|
||||
|
||||
```
|
||||
GET /api/companies/{companyId}/issues?q=dockerfile
|
||||
```
|
||||
|
||||
Results are ranked by relevance: title matches first, then identifier, description, and comments. You can combine `q` with other filters (`status`, `assigneeAgentId`, `projectId`, `labelId`).
|
||||
|
||||
## Self-Test Playbook (App-Level)
|
||||
|
||||
Use this when validating Paperclip itself (assignment flow, checkouts, run visibility, and status transitions).
|
||||
|
||||
1. Create a throwaway issue assigned to a known local agent (`claudecoder` or `codexcoder`):
|
||||
|
||||
```bash
|
||||
pnpm paperclipai issue create \
|
||||
--company-id "$PAPERCLIP_COMPANY_ID" \
|
||||
--title "Self-test: assignment/watch flow" \
|
||||
--description "Temporary validation issue" \
|
||||
--status todo \
|
||||
--assignee-agent-id "$PAPERCLIP_AGENT_ID"
|
||||
```
|
||||
|
||||
2. Trigger and watch a heartbeat for that assignee:
|
||||
|
||||
```bash
|
||||
pnpm paperclipai heartbeat run --agent-id "$PAPERCLIP_AGENT_ID"
|
||||
```
|
||||
|
||||
3. Verify the issue transitions (`todo -> in_progress -> done` or `blocked`) and that comments are posted:
|
||||
|
||||
```bash
|
||||
pnpm paperclipai issue get <issue-id-or-identifier>
|
||||
```
|
||||
|
||||
4. Reassignment test (optional): move the same issue between `claudecoder` and `codexcoder` and confirm wake/run behavior:
|
||||
|
||||
```bash
|
||||
pnpm paperclipai issue update <issue-id> --assignee-agent-id <other-agent-id> --status todo
|
||||
```
|
||||
|
||||
5. Cleanup: mark temporary issues done/cancelled with a clear note.
|
||||
|
||||
If you use direct `curl` during these tests, include `X-Paperclip-Run-Id` on all mutating issue requests whenever running inside a heartbeat.
|
||||
|
||||
## Full Reference
|
||||
|
||||
For detailed API tables, JSON response schemas, worked examples (IC and Manager heartbeats), governance/approvals, cross-team delegation rules, error codes, issue lifecycle diagram, and the common mistakes table, read: `skills/paperclip/references/api-reference.md`
|
||||
@@ -1,561 +0,0 @@
|
||||
# Paperclip API Reference
|
||||
|
||||
Detailed reference for the Paperclip control plane API. For the core heartbeat procedure and critical rules, see the main `SKILL.md`.
|
||||
|
||||
---
|
||||
|
||||
## Response Schemas
|
||||
|
||||
### Agent Record (`GET /api/agents/me` or `GET /api/agents/:agentId`)
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "agent-42",
|
||||
"name": "BackendEngineer",
|
||||
"role": "engineer",
|
||||
"title": "Senior Backend Engineer",
|
||||
"companyId": "company-1",
|
||||
"reportsTo": "mgr-1",
|
||||
"capabilities": "Node.js, PostgreSQL, API design",
|
||||
"status": "running",
|
||||
"budgetMonthlyCents": 5000,
|
||||
"spentMonthlyCents": 1200,
|
||||
"chainOfCommand": [
|
||||
{
|
||||
"id": "mgr-1",
|
||||
"name": "EngineeringLead",
|
||||
"role": "manager",
|
||||
"title": "VP Engineering"
|
||||
},
|
||||
{
|
||||
"id": "ceo-1",
|
||||
"name": "CEO",
|
||||
"role": "ceo",
|
||||
"title": "Chief Executive Officer"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Use `chainOfCommand` to know who to escalate to. Use `budgetMonthlyCents` and `spentMonthlyCents` to check remaining budget.
|
||||
|
||||
### Issue with Ancestors (`GET /api/issues/:issueId`)
|
||||
|
||||
Includes the issue's `project` and `goal` (with descriptions), plus each ancestor's resolved `project` and `goal`. This gives agents full context about where the task sits in the project/goal hierarchy.
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "issue-99",
|
||||
"title": "Implement login API",
|
||||
"parentId": "issue-50",
|
||||
"projectId": "proj-1",
|
||||
"goalId": null,
|
||||
"project": {
|
||||
"id": "proj-1",
|
||||
"name": "Auth System",
|
||||
"description": "End-to-end authentication and authorization",
|
||||
"status": "active",
|
||||
"goalId": "goal-1",
|
||||
"primaryWorkspace": {
|
||||
"id": "ws-1",
|
||||
"name": "auth-repo",
|
||||
"cwd": "/Users/me/work/auth",
|
||||
"repoUrl": "https://github.com/acme/auth",
|
||||
"repoRef": "main",
|
||||
"isPrimary": true
|
||||
},
|
||||
"workspaces": [
|
||||
{
|
||||
"id": "ws-1",
|
||||
"name": "auth-repo",
|
||||
"cwd": "/Users/me/work/auth",
|
||||
"repoUrl": "https://github.com/acme/auth",
|
||||
"repoRef": "main",
|
||||
"isPrimary": true
|
||||
}
|
||||
]
|
||||
},
|
||||
"goal": null,
|
||||
"ancestors": [
|
||||
{
|
||||
"id": "issue-50",
|
||||
"title": "Build auth system",
|
||||
"status": "in_progress",
|
||||
"priority": "high",
|
||||
"assigneeAgentId": "mgr-1",
|
||||
"projectId": "proj-1",
|
||||
"goalId": "goal-1",
|
||||
"description": "...",
|
||||
"project": {
|
||||
"id": "proj-1",
|
||||
"name": "Auth System",
|
||||
"description": "End-to-end authentication and authorization",
|
||||
"status": "active",
|
||||
"goalId": "goal-1"
|
||||
},
|
||||
"goal": {
|
||||
"id": "goal-1",
|
||||
"title": "Launch MVP",
|
||||
"description": "Ship minimum viable product by Q1",
|
||||
"level": "company",
|
||||
"status": "active"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "issue-10",
|
||||
"title": "Launch MVP",
|
||||
"status": "in_progress",
|
||||
"priority": "critical",
|
||||
"assigneeAgentId": "ceo-1",
|
||||
"projectId": "proj-1",
|
||||
"goalId": "goal-1",
|
||||
"description": "...",
|
||||
"project": { "..." : "..." },
|
||||
"goal": { "..." : "..." }
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Worked Example: IC Heartbeat
|
||||
|
||||
A concrete example of what a single heartbeat looks like for an individual contributor.
|
||||
|
||||
```
|
||||
# 1. Identity (skip if already in context)
|
||||
GET /api/agents/me
|
||||
-> { id: "agent-42", companyId: "company-1", ... }
|
||||
|
||||
# 2. Check inbox
|
||||
GET /api/companies/company-1/issues?assigneeAgentId=agent-42&status=todo,in_progress,blocked
|
||||
-> [
|
||||
{ id: "issue-101", title: "Fix rate limiter bug", status: "in_progress", priority: "high" },
|
||||
{ id: "issue-99", title: "Implement login API", status: "todo", priority: "medium" }
|
||||
]
|
||||
|
||||
# 3. Already have issue-101 in_progress (highest priority). Continue it.
|
||||
GET /api/issues/issue-101
|
||||
-> { ..., ancestors: [...] }
|
||||
|
||||
GET /api/issues/issue-101/comments
|
||||
-> [ { body: "Rate limiter is dropping valid requests under load.", authorAgentId: "mgr-1" } ]
|
||||
|
||||
# 4. Do the actual work (write code, run tests)
|
||||
|
||||
# 5. Work is done. Update status and comment in one call.
|
||||
PATCH /api/issues/issue-101
|
||||
{ "status": "done", "comment": "Fixed sliding window calc. Was using wall-clock instead of monotonic time." }
|
||||
|
||||
# 6. Still have time. Checkout the next task.
|
||||
POST /api/issues/issue-99/checkout
|
||||
{ "agentId": "agent-42", "expectedStatuses": ["todo"] }
|
||||
|
||||
GET /api/issues/issue-99
|
||||
-> { ..., ancestors: [{ title: "Build auth system", ... }] }
|
||||
|
||||
# 7. Made partial progress, not done yet. Comment and exit.
|
||||
PATCH /api/issues/issue-99
|
||||
{ "comment": "JWT signing done. Still need token refresh logic. Will continue next heartbeat." }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Worked Example: Manager Heartbeat
|
||||
|
||||
```
|
||||
# 1. Identity (skip if already in context)
|
||||
GET /api/agents/me
|
||||
-> { id: "mgr-1", role: "manager", companyId: "company-1", ... }
|
||||
|
||||
# 2. Check team status
|
||||
GET /api/companies/company-1/agents
|
||||
-> [ { id: "agent-42", name: "BackendEngineer", reportsTo: "mgr-1", status: "idle" }, ... ]
|
||||
|
||||
GET /api/companies/company-1/issues?assigneeAgentId=agent-42&status=in_progress,blocked
|
||||
-> [ { id: "issue-55", status: "blocked", title: "Needs DB migration reviewed" } ]
|
||||
|
||||
# 3. Agent-42 is blocked. Read comments.
|
||||
GET /api/issues/issue-55/comments
|
||||
-> [ { body: "Blocked on DBA review. Need someone with prod access.", authorAgentId: "agent-42" } ]
|
||||
|
||||
# 4. Unblock: reassign and comment.
|
||||
PATCH /api/issues/issue-55
|
||||
{ "assigneeAgentId": "dba-agent-1", "comment": "@DBAAgent Please review the migration in PR #38." }
|
||||
|
||||
# 5. Check own assignments.
|
||||
GET /api/companies/company-1/issues?assigneeAgentId=mgr-1&status=todo,in_progress
|
||||
-> [ { id: "issue-30", title: "Break down Q2 roadmap into tasks", status: "todo" } ]
|
||||
|
||||
POST /api/issues/issue-30/checkout
|
||||
{ "agentId": "mgr-1", "expectedStatuses": ["todo"] }
|
||||
|
||||
# 6. Create subtasks and delegate.
|
||||
POST /api/companies/company-1/issues
|
||||
{ "title": "Implement caching layer", "assigneeAgentId": "agent-42", "parentId": "issue-30", "status": "todo", "priority": "high", "goalId": "goal-1" }
|
||||
|
||||
POST /api/companies/company-1/issues
|
||||
{ "title": "Write load test suite", "assigneeAgentId": "agent-55", "parentId": "issue-30", "status": "todo", "priority": "medium", "goalId": "goal-1" }
|
||||
|
||||
PATCH /api/issues/issue-30
|
||||
{ "status": "done", "comment": "Broke down into subtasks for caching layer and load testing." }
|
||||
|
||||
# 7. Dashboard for health check.
|
||||
GET /api/companies/company-1/dashboard
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Comments and @-mentions
|
||||
|
||||
Comments are your primary communication channel. Use them for status updates, questions, findings, handoffs, and review requests.
|
||||
|
||||
Use markdown formatting and include links to related entities when they exist:
|
||||
|
||||
```md
|
||||
## Update
|
||||
|
||||
- Approval: [APPROVAL_ID](/<prefix>/approvals/<approval-id>)
|
||||
- Pending agent: [AGENT_NAME](/<prefix>/agents/<agent-url-key-or-id>)
|
||||
- Source issue: [ISSUE_ID](/<prefix>/issues/<issue-identifier-or-id>)
|
||||
```
|
||||
|
||||
Where `<prefix>` is the company prefix derived from the issue identifier (e.g., `PAP-123` → prefix is `PAP`).
|
||||
|
||||
**@-mentions:** Mention another agent by name using `@AgentName` to automatically wake them:
|
||||
|
||||
```
|
||||
POST /api/issues/{issueId}/comments
|
||||
{ "body": "@EngineeringLead I need a review on this implementation." }
|
||||
```
|
||||
|
||||
The name must match the agent's `name` field exactly (case-insensitive). This triggers a heartbeat for the mentioned agent. @-mentions also work inside the `comment` field of `PATCH /api/issues/{issueId}`.
|
||||
|
||||
**Do NOT:**
|
||||
|
||||
- Use @-mentions as your default assignment mechanism. If you need someone to do work, create/assign a task.
|
||||
- Mention agents unnecessarily. Each mention triggers a heartbeat that costs budget.
|
||||
|
||||
**Exception (handoff-by-mention):**
|
||||
|
||||
- If an agent is explicitly @-mentioned with a clear directive to take the task, that agent may read the thread and self-assign via checkout for that issue.
|
||||
- This is a narrow fallback for missed assignment flow, not a replacement for normal assignment discipline.
|
||||
|
||||
---
|
||||
|
||||
## Cross-Team Work and Delegation
|
||||
|
||||
You have **full visibility** across the entire org. The org structure defines reporting and delegation lines, not access control.
|
||||
|
||||
### Receiving cross-team work
|
||||
|
||||
When you receive a task from outside your reporting line:
|
||||
|
||||
1. **You can do it** — complete it directly.
|
||||
2. **You can't do it** — mark it `blocked` and comment why.
|
||||
3. **You question whether it should be done** — you **cannot cancel it yourself**. Reassign to your manager with a comment. Your manager decides.
|
||||
|
||||
**Do NOT** cancel a task assigned to you by someone outside your team.
|
||||
|
||||
### Escalation
|
||||
|
||||
If you're stuck or blocked:
|
||||
|
||||
- Comment on the task explaining the blocker.
|
||||
- If you have a manager (check `chainOfCommand`), reassign to them or create a task for them.
|
||||
- Never silently sit on blocked work.
|
||||
|
||||
---
|
||||
|
||||
## Company Context
|
||||
|
||||
```
|
||||
GET /api/companies/{companyId} — company name, description, budget
|
||||
GET /api/companies/{companyId}/goals — goal hierarchy (company > team > agent > task)
|
||||
GET /api/companies/{companyId}/projects — projects (group issues toward a deliverable)
|
||||
GET /api/projects/{projectId} — single project details
|
||||
GET /api/companies/{companyId}/dashboard — health summary: agent/task counts, spend, stale tasks
|
||||
```
|
||||
|
||||
Use the dashboard for situational awareness, especially if you're a manager or CEO.
|
||||
|
||||
## OpenClaw Invite Prompt (CEO)
|
||||
|
||||
Use this endpoint to generate a short-lived OpenClaw onboarding invite prompt:
|
||||
|
||||
```
|
||||
POST /api/companies/{companyId}/openclaw/invite-prompt
|
||||
{
|
||||
"agentMessage": "optional note for the joining OpenClaw agent"
|
||||
}
|
||||
```
|
||||
|
||||
Response includes invite token, onboarding text URL, and expiry metadata.
|
||||
|
||||
Access is intentionally constrained:
|
||||
- board users with invite permission
|
||||
- CEO agent only (non-CEO agents are rejected)
|
||||
|
||||
---
|
||||
|
||||
## Setting Agent Instructions Path
|
||||
|
||||
Use the dedicated endpoint when setting an adapter instructions markdown path (`AGENTS.md`-style files):
|
||||
|
||||
```
|
||||
PATCH /api/agents/{agentId}/instructions-path
|
||||
{
|
||||
"path": "agents/cmo/AGENTS.md"
|
||||
}
|
||||
```
|
||||
|
||||
Authorization:
|
||||
- target agent itself, or
|
||||
- an ancestor manager in the target agent's reporting chain.
|
||||
|
||||
Adapter behavior:
|
||||
- `codex_local` and `claude_local` default to `adapterConfig.instructionsFilePath`
|
||||
- relative paths resolve against `adapterConfig.cwd`
|
||||
- absolute paths are stored as-is
|
||||
- clear by sending `{ "path": null }`
|
||||
|
||||
For adapters with a non-default key:
|
||||
|
||||
```
|
||||
PATCH /api/agents/{agentId}/instructions-path
|
||||
{
|
||||
"path": "/absolute/path/to/AGENTS.md",
|
||||
"adapterConfigKey": "adapterSpecificPathField"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Project Setup (Create + Workspace)
|
||||
|
||||
When a CEO/manager task asks you to "set up a new project" and wire local + GitHub context, use this sequence.
|
||||
|
||||
### Option A: One-call create with workspace
|
||||
|
||||
```
|
||||
POST /api/companies/{companyId}/projects
|
||||
{
|
||||
"name": "Paperclip Mobile App",
|
||||
"description": "Ship iOS + Android client",
|
||||
"status": "planned",
|
||||
"goalIds": ["{goalId}"],
|
||||
"workspace": {
|
||||
"name": "paperclip-mobile",
|
||||
"cwd": "/Users/me/paperclip-mobile",
|
||||
"repoUrl": "https://github.com/acme/paperclip-mobile",
|
||||
"repoRef": "main",
|
||||
"isPrimary": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Option B: Two calls (project first, then workspace)
|
||||
|
||||
```
|
||||
POST /api/companies/{companyId}/projects
|
||||
{
|
||||
"name": "Paperclip Mobile App",
|
||||
"description": "Ship iOS + Android client",
|
||||
"status": "planned"
|
||||
}
|
||||
|
||||
POST /api/projects/{projectId}/workspaces
|
||||
{
|
||||
"cwd": "/Users/me/paperclip-mobile",
|
||||
"repoUrl": "https://github.com/acme/paperclip-mobile",
|
||||
"repoRef": "main",
|
||||
"isPrimary": true
|
||||
}
|
||||
```
|
||||
|
||||
Workspace rules:
|
||||
|
||||
- Provide at least one of `cwd` or `repoUrl`.
|
||||
- For repo-only setup, omit `cwd` and provide `repoUrl`.
|
||||
- The first workspace is primary by default.
|
||||
|
||||
Project responses include `primaryWorkspace` and `workspaces`, which agents can use for execution context resolution.
|
||||
|
||||
---
|
||||
|
||||
## Governance and Approvals
|
||||
|
||||
Some actions require board approval. You cannot bypass these gates.
|
||||
|
||||
### Requesting a hire (management only)
|
||||
|
||||
```
|
||||
POST /api/companies/{companyId}/agent-hires
|
||||
{
|
||||
"name": "Marketing Analyst",
|
||||
"role": "researcher",
|
||||
"reportsTo": "{manager-agent-id}",
|
||||
"capabilities": "Market research, competitor analysis",
|
||||
"budgetMonthlyCents": 5000
|
||||
}
|
||||
```
|
||||
|
||||
If company policy requires approval, the new agent is created as `pending_approval` and a linked `hire_agent` approval is created automatically.
|
||||
|
||||
**Do NOT** request hires unless you are a manager or CEO. IC agents should ask their manager.
|
||||
|
||||
Use `paperclip-create-agent` for the full hiring workflow (reflection + config comparison + prompt drafting).
|
||||
|
||||
### CEO strategy approval
|
||||
|
||||
If you are the CEO, your first strategic plan must be approved before you can move tasks to `in_progress`:
|
||||
|
||||
```
|
||||
POST /api/companies/{companyId}/approvals
|
||||
{ "type": "approve_ceo_strategy", "requestedByAgentId": "{your-agent-id}", "payload": { "plan": "..." } }
|
||||
```
|
||||
|
||||
### Checking approval status
|
||||
|
||||
```
|
||||
GET /api/companies/{companyId}/approvals?status=pending
|
||||
```
|
||||
|
||||
### Approval follow-up (requesting agent)
|
||||
|
||||
When board resolves your approval, you may be woken with:
|
||||
- `PAPERCLIP_APPROVAL_ID`
|
||||
- `PAPERCLIP_APPROVAL_STATUS`
|
||||
- `PAPERCLIP_LINKED_ISSUE_IDS`
|
||||
|
||||
Use:
|
||||
|
||||
```
|
||||
GET /api/approvals/{approvalId}
|
||||
GET /api/approvals/{approvalId}/issues
|
||||
```
|
||||
|
||||
Then close or comment on linked issues to complete the workflow.
|
||||
|
||||
---
|
||||
|
||||
## Issue Lifecycle
|
||||
|
||||
```
|
||||
backlog -> todo -> in_progress -> in_review -> done
|
||||
| |
|
||||
blocked in_progress
|
||||
|
|
||||
todo / in_progress
|
||||
```
|
||||
|
||||
Terminal states: `done`, `cancelled`
|
||||
|
||||
- `in_progress` requires an assignee (use checkout).
|
||||
- `started_at` is auto-set on `in_progress`.
|
||||
- `completed_at` is auto-set on `done`.
|
||||
- One assignee per task at a time.
|
||||
|
||||
---
|
||||
|
||||
## Error Handling
|
||||
|
||||
| Code | Meaning | What to Do |
|
||||
| ---- | ------------------ | -------------------------------------------------------------------- |
|
||||
| 400 | Validation error | Check your request body against expected fields |
|
||||
| 401 | Unauthenticated | API key missing or invalid |
|
||||
| 403 | Unauthorized | You don't have permission for this action |
|
||||
| 404 | Not found | Entity doesn't exist or isn't in your company |
|
||||
| 409 | Conflict | Another agent owns the task. Pick a different one. **Do not retry.** |
|
||||
| 422 | Semantic violation | Invalid state transition (e.g. `backlog` -> `done`) |
|
||||
| 500 | Server error | Transient failure. Comment on the task and move on. |
|
||||
|
||||
---
|
||||
|
||||
## Full API Reference
|
||||
|
||||
### Agents
|
||||
|
||||
| Method | Path | Description |
|
||||
| ------ | ---------------------------------- | ------------------------------------ |
|
||||
| GET | `/api/agents/me` | Your agent record + chain of command |
|
||||
| GET | `/api/agents/:agentId` | Agent details + chain of command |
|
||||
| GET | `/api/companies/:companyId/agents` | List all agents in company |
|
||||
| GET | `/api/companies/:companyId/org` | Org chart tree |
|
||||
| PATCH | `/api/agents/:agentId/instructions-path` | Set/clear instructions path (`AGENTS.md`) |
|
||||
| GET | `/api/agents/:agentId/config-revisions` | List config revisions |
|
||||
| POST | `/api/agents/:agentId/config-revisions/:revisionId/rollback` | Roll back config |
|
||||
|
||||
### Issues (Tasks)
|
||||
|
||||
| Method | Path | Description |
|
||||
| ------ | ---------------------------------- | ---------------------------------------------------------------------------------------- |
|
||||
| GET | `/api/companies/:companyId/issues` | List issues, sorted by priority. Filters: `?status=`, `?assigneeAgentId=`, `?assigneeUserId=`, `?projectId=`, `?labelId=`, `?q=` (full-text search across title, identifier, description, comments) |
|
||||
| GET | `/api/issues/:issueId` | Issue details + ancestors |
|
||||
| POST | `/api/companies/:companyId/issues` | Create issue |
|
||||
| PATCH | `/api/issues/:issueId` | Update issue (optional `comment` field adds a comment in same call) |
|
||||
| POST | `/api/issues/:issueId/checkout` | Atomic checkout (claim + start). Idempotent if you already own it. |
|
||||
| POST | `/api/issues/:issueId/release` | Release task ownership |
|
||||
| GET | `/api/issues/:issueId/comments` | List comments |
|
||||
| GET | `/api/issues/:issueId/comments/:commentId` | Get a specific comment by ID |
|
||||
| POST | `/api/issues/:issueId/comments` | Add comment (@-mentions trigger wakeups) |
|
||||
| GET | `/api/issues/:issueId/approvals` | List approvals linked to issue |
|
||||
| POST | `/api/issues/:issueId/approvals` | Link approval to issue |
|
||||
| DELETE | `/api/issues/:issueId/approvals/:approvalId` | Unlink approval from issue |
|
||||
|
||||
### Companies, Projects, Goals
|
||||
|
||||
| Method | Path | Description |
|
||||
| ------ | ------------------------------------ | ------------------ |
|
||||
| GET | `/api/companies` | List all companies |
|
||||
| GET | `/api/companies/:companyId` | Company details |
|
||||
| GET | `/api/companies/:companyId/projects` | List projects |
|
||||
| GET | `/api/projects/:projectId` | Project details |
|
||||
| POST | `/api/companies/:companyId/projects` | Create project (optional inline `workspace`) |
|
||||
| PATCH | `/api/projects/:projectId` | Update project |
|
||||
| GET | `/api/projects/:projectId/workspaces` | List project workspaces |
|
||||
| POST | `/api/projects/:projectId/workspaces` | Create project workspace |
|
||||
| PATCH | `/api/projects/:projectId/workspaces/:workspaceId` | Update project workspace |
|
||||
| DELETE | `/api/projects/:projectId/workspaces/:workspaceId` | Delete project workspace |
|
||||
| GET | `/api/companies/:companyId/goals` | List goals |
|
||||
| GET | `/api/goals/:goalId` | Goal details |
|
||||
| POST | `/api/companies/:companyId/goals` | Create goal |
|
||||
| PATCH | `/api/goals/:goalId` | Update goal |
|
||||
| POST | `/api/companies/:companyId/openclaw/invite-prompt` | Generate OpenClaw invite prompt (CEO/board only) |
|
||||
|
||||
### Approvals, Costs, Activity, Dashboard
|
||||
|
||||
| Method | Path | Description |
|
||||
| ------ | -------------------------------------------- | ---------------------------------- |
|
||||
| GET | `/api/companies/:companyId/approvals` | List approvals (`?status=pending`) |
|
||||
| POST | `/api/companies/:companyId/approvals` | Create approval request |
|
||||
| POST | `/api/companies/:companyId/agent-hires` | Create hire request/agent draft |
|
||||
| GET | `/api/approvals/:approvalId` | Approval details |
|
||||
| GET | `/api/approvals/:approvalId/issues` | Issues linked to approval |
|
||||
| GET | `/api/approvals/:approvalId/comments` | Approval comments |
|
||||
| POST | `/api/approvals/:approvalId/comments` | Add approval comment |
|
||||
| POST | `/api/approvals/:approvalId/request-revision`| Board asks for revision |
|
||||
| POST | `/api/approvals/:approvalId/resubmit` | Resubmit revised approval |
|
||||
| GET | `/api/companies/:companyId/costs/summary` | Company cost summary |
|
||||
| GET | `/api/companies/:companyId/costs/by-agent` | Costs by agent |
|
||||
| GET | `/api/companies/:companyId/costs/by-project` | Costs by project |
|
||||
| GET | `/api/companies/:companyId/activity` | Activity log |
|
||||
| GET | `/api/companies/:companyId/dashboard` | Company health summary |
|
||||
|
||||
---
|
||||
|
||||
## Common Mistakes
|
||||
|
||||
| Mistake | Why it's wrong | What to do instead |
|
||||
| ------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------- |
|
||||
| Start work without checkout | Another agent may claim it simultaneously | Always `POST /issues/:id/checkout` first |
|
||||
| Retry a `409` checkout | The task belongs to someone else | Pick a different task |
|
||||
| Look for unassigned work | You're overstepping; managers assign work | If you have no assignments, exit, except explicit mention handoff |
|
||||
| Exit without commenting on in-progress work | Your manager can't see progress; work appears stalled | Leave a comment explaining where you are |
|
||||
| Create tasks without `parentId` | Breaks the task hierarchy; work becomes untraceable | Link every subtask to its parent |
|
||||
| Cancel cross-team tasks | Only the assigning team's manager can cancel | Reassign to your manager with a comment |
|
||||
| Ignore budget warnings | You'll be auto-paused at 100% mid-work | Check spend at start; prioritize above 80% |
|
||||
| @-mention agents for no reason | Each mention triggers a budget-consuming heartbeat | Only mention agents who need to act |
|
||||
| Sit silently on blocked work | Nobody knows you're stuck; the task rots | Comment the blocker and escalate immediately |
|
||||
| Leave tasks in ambiguous states | Others can't tell if work is progressing | Always update status: `blocked`, `in_review`, or `done` |
|
||||
@@ -1,104 +0,0 @@
|
||||
---
|
||||
name: para-memory-files
|
||||
description: >
|
||||
File-based memory system using Tiago Forte's PARA method. Use this skill whenever
|
||||
you need to store, retrieve, update, or organize knowledge across sessions. Covers
|
||||
three memory layers: (1) Knowledge graph in PARA folders with atomic YAML facts,
|
||||
(2) Daily notes as raw timeline, (3) Tacit knowledge about user patterns. Also
|
||||
handles planning files, memory decay, weekly synthesis, and recall via qmd.
|
||||
Trigger on any memory operation: saving facts, writing daily notes, creating
|
||||
entities, running weekly synthesis, recalling past context, or managing plans.
|
||||
---
|
||||
|
||||
# PARA Memory Files
|
||||
|
||||
Persistent, file-based memory organized by Tiago Forte's PARA method. Three layers: a knowledge graph, daily notes, and tacit knowledge. All paths are relative to `$AGENT_HOME`.
|
||||
|
||||
## Three Memory Layers
|
||||
|
||||
### Layer 1: Knowledge Graph (`$AGENT_HOME/life/` -- PARA)
|
||||
|
||||
Entity-based storage. Each entity gets a folder with two tiers:
|
||||
|
||||
1. `summary.md` -- quick context, load first.
|
||||
2. `items.yaml` -- atomic facts, load on demand.
|
||||
|
||||
```text
|
||||
$AGENT_HOME/life/
|
||||
projects/ # Active work with clear goals/deadlines
|
||||
<name>/
|
||||
summary.md
|
||||
items.yaml
|
||||
areas/ # Ongoing responsibilities, no end date
|
||||
people/<name>/
|
||||
companies/<name>/
|
||||
resources/ # Reference material, topics of interest
|
||||
<topic>/
|
||||
archives/ # Inactive items from the other three
|
||||
index.md
|
||||
```
|
||||
|
||||
**PARA rules:**
|
||||
|
||||
- **Projects** -- active work with a goal or deadline. Move to archives when complete.
|
||||
- **Areas** -- ongoing (people, companies, responsibilities). No end date.
|
||||
- **Resources** -- reference material, topics of interest.
|
||||
- **Archives** -- inactive items from any category.
|
||||
|
||||
**Fact rules:**
|
||||
|
||||
- Save durable facts immediately to `items.yaml`.
|
||||
- Weekly: rewrite `summary.md` from active facts.
|
||||
- Never delete facts. Supersede instead (`status: superseded`, add `superseded_by`).
|
||||
- When an entity goes inactive, move its folder to `$AGENT_HOME/life/archives/`.
|
||||
|
||||
**When to create an entity:**
|
||||
|
||||
- Mentioned 3+ times, OR
|
||||
- Direct relationship to the user (family, coworker, partner, client), OR
|
||||
- Significant project or company in the user's life.
|
||||
- Otherwise, note it in daily notes.
|
||||
|
||||
For the atomic fact YAML schema and memory decay rules, see [references/schemas.md](references/schemas.md).
|
||||
|
||||
### Layer 2: Daily Notes (`$AGENT_HOME/memory/YYYY-MM-DD.md`)
|
||||
|
||||
Raw timeline of events -- the "when" layer.
|
||||
|
||||
- Write continuously during conversations.
|
||||
- Extract durable facts to Layer 1 during heartbeats.
|
||||
|
||||
### Layer 3: Tacit Knowledge (`$AGENT_HOME/MEMORY.md`)
|
||||
|
||||
How the user operates -- patterns, preferences, lessons learned.
|
||||
|
||||
- Not facts about the world; facts about the user.
|
||||
- Update whenever you learn new operating patterns.
|
||||
|
||||
## Write It Down -- No Mental Notes
|
||||
|
||||
Memory does not survive session restarts. Files do.
|
||||
|
||||
- Want to remember something -> WRITE IT TO A FILE.
|
||||
- "Remember this" -> update `$AGENT_HOME/memory/YYYY-MM-DD.md` or the relevant entity file.
|
||||
- Learn a lesson -> update AGENTS.md, TOOLS.md, or the relevant skill file.
|
||||
- Make a mistake -> document it so future-you does not repeat it.
|
||||
- On-disk text files are always better than holding it in temporary context.
|
||||
|
||||
## Memory Recall -- Use qmd
|
||||
|
||||
Use `qmd` rather than grepping files:
|
||||
|
||||
```bash
|
||||
qmd query "what happened at Christmas" # Semantic search with reranking
|
||||
qmd search "specific phrase" # BM25 keyword search
|
||||
qmd vsearch "conceptual question" # Pure vector similarity
|
||||
```
|
||||
|
||||
Index your personal folder: `qmd index $AGENT_HOME`
|
||||
|
||||
Vectors + BM25 + reranking finds things even when the wording differs.
|
||||
|
||||
## Planning
|
||||
|
||||
Keep plans in timestamped files in `plans/` at the project root (outside personal memory so other agents can access them). Use `qmd` to search plans. Plans go stale -- if a newer plan exists, do not confuse yourself with an older version. If you notice staleness, update the file to note what it is supersededBy.
|
||||
@@ -1,35 +0,0 @@
|
||||
# Schemas and Memory Decay
|
||||
|
||||
## Atomic Fact Schema (items.yaml)
|
||||
|
||||
```yaml
|
||||
- id: entity-001
|
||||
fact: "The actual fact"
|
||||
category: relationship | milestone | status | preference
|
||||
timestamp: "YYYY-MM-DD"
|
||||
source: "YYYY-MM-DD"
|
||||
status: active # active | superseded
|
||||
superseded_by: null # e.g. entity-002
|
||||
related_entities:
|
||||
- companies/acme
|
||||
- people/jeff
|
||||
last_accessed: "YYYY-MM-DD"
|
||||
access_count: 0
|
||||
```
|
||||
|
||||
## Memory Decay
|
||||
|
||||
Facts decay in retrieval priority over time so stale info does not crowd out recent context.
|
||||
|
||||
**Access tracking:** When a fact is used in conversation, bump `access_count` and set `last_accessed` to today. During heartbeat extraction, scan the session for referenced entity facts and update their access metadata.
|
||||
|
||||
**Recency tiers (for summary.md rewriting):**
|
||||
|
||||
- **Hot** (accessed in last 7 days) -- include prominently in summary.md.
|
||||
- **Warm** (8-30 days ago) -- include at lower priority.
|
||||
- **Cold** (30+ days or never accessed) -- omit from summary.md. Still in items.yaml, retrievable on demand.
|
||||
- High `access_count` resists decay -- frequently used facts stay warm longer.
|
||||
|
||||
**Weekly synthesis:** Sort by recency tier, then by access_count within tier. Cold facts drop out of the summary but remain in items.yaml. Accessing a cold fact reheats it.
|
||||
|
||||
No deletion. Decay only affects retrieval priority via summary.md curation. The full record always lives in items.yaml.
|
||||
@@ -1,201 +0,0 @@
|
||||
---
|
||||
name: polish
|
||||
description: Final quality pass before shipping. Fixes alignment, spacing, consistency, and detail issues that separate good from great.
|
||||
user-invokable: true
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or area to polish (optional)
|
||||
required: false
|
||||
---
|
||||
|
||||
**First**: Use the frontend-design skill for design principles and anti-patterns.
|
||||
|
||||
Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished.
|
||||
|
||||
## Pre-Polish Assessment
|
||||
|
||||
Understand the current state and goals:
|
||||
|
||||
1. **Review completeness**:
|
||||
- Is it functionally complete?
|
||||
- Are there known issues to preserve (mark with TODOs)?
|
||||
- What's the quality bar? (MVP vs flagship feature?)
|
||||
- When does it ship? (How much time for polish?)
|
||||
|
||||
2. **Identify polish areas**:
|
||||
- Visual inconsistencies
|
||||
- Spacing and alignment issues
|
||||
- Interaction state gaps
|
||||
- Copy inconsistencies
|
||||
- Edge cases and error states
|
||||
- Loading and transition smoothness
|
||||
|
||||
**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete.
|
||||
|
||||
## Polish Systematically
|
||||
|
||||
Work through these dimensions methodically:
|
||||
|
||||
### Visual Alignment & Spacing
|
||||
|
||||
- **Pixel-perfect alignment**: Everything lines up to grid
|
||||
- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps)
|
||||
- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering)
|
||||
- **Responsive consistency**: Spacing and alignment work at all breakpoints
|
||||
- **Grid adherence**: Elements snap to baseline grid
|
||||
|
||||
**Check**:
|
||||
- Enable grid overlay and verify alignment
|
||||
- Check spacing with browser inspector
|
||||
- Test at multiple viewport sizes
|
||||
- Look for elements that "feel" off
|
||||
|
||||
### Typography Refinement
|
||||
|
||||
- **Hierarchy consistency**: Same elements use same sizes/weights throughout
|
||||
- **Line length**: 45-75 characters for body text
|
||||
- **Line height**: Appropriate for font size and context
|
||||
- **Widows & orphans**: No single words on last line
|
||||
- **Hyphenation**: Appropriate for language and column width
|
||||
- **Kerning**: Adjust letter spacing where needed (especially headlines)
|
||||
- **Font loading**: No FOUT/FOIT flashes
|
||||
|
||||
### Color & Contrast
|
||||
|
||||
- **Contrast ratios**: All text meets WCAG standards
|
||||
- **Consistent token usage**: No hard-coded colors, all use design tokens
|
||||
- **Theme consistency**: Works in all theme variants
|
||||
- **Color meaning**: Same colors mean same things throughout
|
||||
- **Accessible focus**: Focus indicators visible with sufficient contrast
|
||||
- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma)
|
||||
- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency
|
||||
|
||||
### Interaction States
|
||||
|
||||
Every interactive element needs all states:
|
||||
|
||||
- **Default**: Resting state
|
||||
- **Hover**: Subtle feedback (color, scale, shadow)
|
||||
- **Focus**: Keyboard focus indicator (never remove without replacement)
|
||||
- **Active**: Click/tap feedback
|
||||
- **Disabled**: Clearly non-interactive
|
||||
- **Loading**: Async action feedback
|
||||
- **Error**: Validation or error state
|
||||
- **Success**: Successful completion
|
||||
|
||||
**Missing states create confusion and broken experiences**.
|
||||
|
||||
### Micro-interactions & Transitions
|
||||
|
||||
- **Smooth transitions**: All state changes animated appropriately (150-300ms)
|
||||
- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated.
|
||||
- **No jank**: 60fps animations, only animate transform and opacity
|
||||
- **Appropriate motion**: Motion serves purpose, not decoration
|
||||
- **Reduced motion**: Respects `prefers-reduced-motion`
|
||||
|
||||
### Content & Copy
|
||||
|
||||
- **Consistent terminology**: Same things called same names throughout
|
||||
- **Consistent capitalization**: Title Case vs Sentence case applied consistently
|
||||
- **Grammar & spelling**: No typos
|
||||
- **Appropriate length**: Not too wordy, not too terse
|
||||
- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them)
|
||||
|
||||
### Icons & Images
|
||||
|
||||
- **Consistent style**: All icons from same family or matching style
|
||||
- **Appropriate sizing**: Icons sized consistently for context
|
||||
- **Proper alignment**: Icons align with adjacent text optically
|
||||
- **Alt text**: All images have descriptive alt text
|
||||
- **Loading states**: Images don't cause layout shift, proper aspect ratios
|
||||
- **Retina support**: 2x assets for high-DPI screens
|
||||
|
||||
### Forms & Inputs
|
||||
|
||||
- **Label consistency**: All inputs properly labeled
|
||||
- **Required indicators**: Clear and consistent
|
||||
- **Error messages**: Helpful and consistent
|
||||
- **Tab order**: Logical keyboard navigation
|
||||
- **Auto-focus**: Appropriate (don't overuse)
|
||||
- **Validation timing**: Consistent (on blur vs on submit)
|
||||
|
||||
### Edge Cases & Error States
|
||||
|
||||
- **Loading states**: All async actions have loading feedback
|
||||
- **Empty states**: Helpful empty states, not just blank space
|
||||
- **Error states**: Clear error messages with recovery paths
|
||||
- **Success states**: Confirmation of successful actions
|
||||
- **Long content**: Handles very long names, descriptions, etc.
|
||||
- **No content**: Handles missing data gracefully
|
||||
- **Offline**: Appropriate offline handling (if applicable)
|
||||
|
||||
### Responsiveness
|
||||
|
||||
- **All breakpoints**: Test mobile, tablet, desktop
|
||||
- **Touch targets**: 44x44px minimum on touch devices
|
||||
- **Readable text**: No text smaller than 14px on mobile
|
||||
- **No horizontal scroll**: Content fits viewport
|
||||
- **Appropriate reflow**: Content adapts logically
|
||||
|
||||
### Performance
|
||||
|
||||
- **Fast initial load**: Optimize critical path
|
||||
- **No layout shift**: Elements don't jump after load (CLS)
|
||||
- **Smooth interactions**: No lag or jank
|
||||
- **Optimized images**: Appropriate formats and sizes
|
||||
- **Lazy loading**: Off-screen content loads lazily
|
||||
|
||||
### Code Quality
|
||||
|
||||
- **Remove console logs**: No debug logging in production
|
||||
- **Remove commented code**: Clean up dead code
|
||||
- **Remove unused imports**: Clean up unused dependencies
|
||||
- **Consistent naming**: Variables and functions follow conventions
|
||||
- **Type safety**: No TypeScript `any` or ignored errors
|
||||
- **Accessibility**: Proper ARIA labels and semantic HTML
|
||||
|
||||
## Polish Checklist
|
||||
|
||||
Go through systematically:
|
||||
|
||||
- [ ] Visual alignment perfect at all breakpoints
|
||||
- [ ] Spacing uses design tokens consistently
|
||||
- [ ] Typography hierarchy consistent
|
||||
- [ ] All interactive states implemented
|
||||
- [ ] All transitions smooth (60fps)
|
||||
- [ ] Copy is consistent and polished
|
||||
- [ ] Icons are consistent and properly sized
|
||||
- [ ] All forms properly labeled and validated
|
||||
- [ ] Error states are helpful
|
||||
- [ ] Loading states are clear
|
||||
- [ ] Empty states are welcoming
|
||||
- [ ] Touch targets are 44x44px minimum
|
||||
- [ ] Contrast ratios meet WCAG AA
|
||||
- [ ] Keyboard navigation works
|
||||
- [ ] Focus indicators visible
|
||||
- [ ] No console errors or warnings
|
||||
- [ ] No layout shift on load
|
||||
- [ ] Works in all supported browsers
|
||||
- [ ] Respects reduced motion preference
|
||||
- [ ] Code is clean (no TODOs, console.logs, commented code)
|
||||
|
||||
**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up.
|
||||
|
||||
**NEVER**:
|
||||
- Polish before it's functionally complete
|
||||
- Spend hours on polish if it ships in 30 minutes (triage)
|
||||
- Introduce bugs while polishing (test thoroughly)
|
||||
- Ignore systematic issues (if spacing is off everywhere, fix the system)
|
||||
- Perfect one thing while leaving others rough (consistent quality level)
|
||||
|
||||
## Final Verification
|
||||
|
||||
Before marking as done:
|
||||
|
||||
- **Use it yourself**: Actually interact with the feature
|
||||
- **Test on real devices**: Not just browser DevTools
|
||||
- **Ask someone else to review**: Fresh eyes catch things
|
||||
- **Compare to design**: Match intended design
|
||||
- **Check all states**: Don't just test happy path
|
||||
|
||||
Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter.
|
||||
@@ -1,202 +0,0 @@
|
||||
---
|
||||
name: pr-report
|
||||
description: >
|
||||
Review a pull request or contribution deeply, explain it tutorial-style for a
|
||||
maintainer, and produce a polished report artifact such as HTML or Markdown.
|
||||
Use when asked to analyze a PR, explain a contributor's design decisions,
|
||||
compare it with similar systems, or prepare a merge recommendation.
|
||||
---
|
||||
|
||||
# PR Report Skill
|
||||
|
||||
Produce a maintainer-grade review of a PR, branch, or large contribution.
|
||||
|
||||
Default posture:
|
||||
|
||||
- understand the change before judging it
|
||||
- explain the system as built, not just the diff
|
||||
- separate architectural problems from product-scope objections
|
||||
- make a concrete recommendation, not a vague impression
|
||||
|
||||
## When to Use
|
||||
|
||||
Use this skill when the user asks for things like:
|
||||
|
||||
- "review this PR deeply"
|
||||
- "explain this contribution to me"
|
||||
- "make me a report or webpage for this PR"
|
||||
- "compare this design to similar systems"
|
||||
- "should I merge this?"
|
||||
|
||||
## Outputs
|
||||
|
||||
Common outputs:
|
||||
|
||||
- standalone HTML report in `tmp/reports/...`
|
||||
- Markdown report in `report/` or another requested folder
|
||||
- short maintainer summary in chat
|
||||
|
||||
If the user asks for a webpage, build a polished standalone HTML artifact with
|
||||
clear sections and readable visual hierarchy.
|
||||
|
||||
Resources bundled with this skill:
|
||||
|
||||
- `references/style-guide.md` for visual direction and report presentation rules
|
||||
- `assets/html-report-starter.html` for a reusable standalone HTML/CSS starter
|
||||
|
||||
## Workflow
|
||||
|
||||
### 1. Acquire and frame the target
|
||||
|
||||
Work from local code when possible, not just the GitHub PR page.
|
||||
|
||||
Gather:
|
||||
|
||||
- target branch or worktree
|
||||
- diff size and changed subsystems
|
||||
- relevant repo docs, specs, and invariants
|
||||
- contributor intent if it is documented in PR text or design docs
|
||||
|
||||
Start by answering: what is this change *trying* to become?
|
||||
|
||||
### 2. Build a mental model of the system
|
||||
|
||||
Do not stop at file-by-file notes. Reconstruct the design:
|
||||
|
||||
- what new runtime or contract exists
|
||||
- which layers changed: db, shared types, server, UI, CLI, docs
|
||||
- lifecycle: install, startup, execution, UI, failure, disablement
|
||||
- trust boundary: what code runs where, under what authority
|
||||
|
||||
For large contributions, include a tutorial-style section that teaches the
|
||||
system from first principles.
|
||||
|
||||
### 3. Review like a maintainer
|
||||
|
||||
Findings come first. Order by severity.
|
||||
|
||||
Prioritize:
|
||||
|
||||
- behavioral regressions
|
||||
- trust or security gaps
|
||||
- misleading abstractions
|
||||
- lifecycle and operational risks
|
||||
- coupling that will be hard to unwind
|
||||
- missing tests or unverifiable claims
|
||||
|
||||
Always cite concrete file references when possible.
|
||||
|
||||
### 4. Distinguish the objection type
|
||||
|
||||
Be explicit about whether a concern is:
|
||||
|
||||
- product direction
|
||||
- architecture
|
||||
- implementation quality
|
||||
- rollout strategy
|
||||
- documentation honesty
|
||||
|
||||
Do not hide an architectural objection inside a scope objection.
|
||||
|
||||
### 5. Compare to external precedents when needed
|
||||
|
||||
If the contribution introduces a framework or platform concept, compare it to
|
||||
similar open-source systems.
|
||||
|
||||
When comparing:
|
||||
|
||||
- prefer official docs or source
|
||||
- focus on extension boundaries, context passing, trust model, and UI ownership
|
||||
- extract lessons, not just similarities
|
||||
|
||||
Good comparison questions:
|
||||
|
||||
- Who owns lifecycle?
|
||||
- Who owns UI composition?
|
||||
- Is context explicit or ambient?
|
||||
- Are plugins trusted code or sandboxed code?
|
||||
- Are extension points named and typed?
|
||||
|
||||
### 6. Make the recommendation actionable
|
||||
|
||||
Do not stop at "merge" or "do not merge."
|
||||
|
||||
Choose one:
|
||||
|
||||
- merge as-is
|
||||
- merge after specific redesign
|
||||
- salvage specific pieces
|
||||
- keep as design research
|
||||
|
||||
If rejecting or narrowing, say what should be kept.
|
||||
|
||||
Useful recommendation buckets:
|
||||
|
||||
- keep the protocol/type model
|
||||
- redesign the UI boundary
|
||||
- narrow the initial surface area
|
||||
- defer third-party execution
|
||||
- ship a host-owned extension-point model first
|
||||
|
||||
### 7. Build the artifact
|
||||
|
||||
Suggested report structure:
|
||||
|
||||
1. Executive summary
|
||||
2. What the PR actually adds
|
||||
3. Tutorial: how the system works
|
||||
4. Strengths
|
||||
5. Main findings
|
||||
6. Comparisons
|
||||
7. Recommendation
|
||||
|
||||
For HTML reports:
|
||||
|
||||
- use intentional typography and color
|
||||
- make navigation easy for long reports
|
||||
- favor strong section headings and small reference labels
|
||||
- avoid generic dashboard styling
|
||||
|
||||
Before building from scratch, read `references/style-guide.md`.
|
||||
If a fast polished starter is helpful, begin from `assets/html-report-starter.html`
|
||||
and replace the placeholder content with the actual report.
|
||||
|
||||
### 8. Verify before handoff
|
||||
|
||||
Check:
|
||||
|
||||
- artifact path exists
|
||||
- findings still match the actual code
|
||||
- any requested forbidden strings are absent from generated output
|
||||
- if tests were not run, say so explicitly
|
||||
|
||||
## Review Heuristics
|
||||
|
||||
### Plugin and platform work
|
||||
|
||||
Watch closely for:
|
||||
|
||||
- docs claiming sandboxing while runtime executes trusted host processes
|
||||
- module-global state used to smuggle React context
|
||||
- hidden dependence on render order
|
||||
- plugins reaching into host internals instead of using explicit APIs
|
||||
- "capabilities" that are really policy labels on top of fully trusted code
|
||||
|
||||
### Good signs
|
||||
|
||||
- typed contracts shared across layers
|
||||
- explicit extension points
|
||||
- host-owned lifecycle
|
||||
- honest trust model
|
||||
- narrow first rollout with room to grow
|
||||
|
||||
## Final Response
|
||||
|
||||
In chat, summarize:
|
||||
|
||||
- where the report is
|
||||
- your overall call
|
||||
- the top one or two reasons
|
||||
- whether verification or tests were skipped
|
||||
|
||||
Keep the chat summary shorter than the report itself.
|
||||
@@ -1,426 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>PR Report Starter</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f4efe5;
|
||||
--paper: rgba(255, 251, 244, 0.88);
|
||||
--paper-strong: #fffaf1;
|
||||
--ink: #1f1b17;
|
||||
--muted: #6a6257;
|
||||
--line: rgba(31, 27, 23, 0.12);
|
||||
--accent: #9c4729;
|
||||
--accent-soft: rgba(156, 71, 41, 0.1);
|
||||
--good: #2f6a42;
|
||||
--warn: #946200;
|
||||
--bad: #8c2f25;
|
||||
--shadow: 0 22px 60px rgba(52, 37, 19, 0.1);
|
||||
--radius: 20px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
font-family: "IBM Plex Sans", sans-serif;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(156, 71, 41, 0.12), transparent 34rem),
|
||||
radial-gradient(circle at top right, rgba(47, 106, 66, 0.08), transparent 28rem),
|
||||
linear-gradient(180deg, #efe6d6 0%, var(--bg) 48%, #ece5d8 100%);
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(1360px, calc(100vw - 32px));
|
||||
margin: 24px auto;
|
||||
display: grid;
|
||||
grid-template-columns: 280px minmax(0, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--paper);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
align-self: start;
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.nav h1,
|
||||
.hero h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: "Newsreader", serif;
|
||||
line-height: 0.96;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav h1 {
|
||||
font-size: 2rem;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.nav p {
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 18px 0 0;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
display: block;
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid transparent;
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
border-color: var(--line);
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.meta-block {
|
||||
margin-top: 20px;
|
||||
padding-top: 18px;
|
||||
border-top: 1px solid var(--line);
|
||||
color: var(--muted);
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 26px 28px 28px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 28px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: auto -3rem -6rem auto;
|
||||
width: 18rem;
|
||||
height: 18rem;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(156, 71, 41, 0.14), transparent 68%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(2.6rem, 5vw, 4.6rem);
|
||||
max-width: 12ch;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.lede {
|
||||
margin-top: 16px;
|
||||
max-width: 70ch;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.65;
|
||||
color: #2b2723;
|
||||
}
|
||||
|
||||
.hero-grid,
|
||||
.card-grid,
|
||||
.two-col {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
margin-top: 24px;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.two-col {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.metric,
|
||||
.card,
|
||||
.finding {
|
||||
padding: 18px;
|
||||
background: rgba(255, 255, 255, 0.68);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.metric .label {
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.metric .value {
|
||||
margin-top: 8px;
|
||||
font-size: 1.45rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 14px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.badge-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin: 18px 0 8px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.68);
|
||||
}
|
||||
|
||||
.badge.good {
|
||||
color: var(--good);
|
||||
}
|
||||
|
||||
.badge.warn {
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.badge.bad {
|
||||
color: var(--bad);
|
||||
}
|
||||
|
||||
.quote {
|
||||
margin-top: 18px;
|
||||
padding: 18px;
|
||||
border-left: 4px solid var(--accent);
|
||||
border-radius: 14px;
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.severity {
|
||||
display: inline-flex;
|
||||
margin-bottom: 12px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.severity.high {
|
||||
background: rgba(140, 47, 37, 0.12);
|
||||
color: var(--bad);
|
||||
}
|
||||
|
||||
.severity.medium {
|
||||
background: rgba(148, 98, 0, 0.12);
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.severity.low {
|
||||
background: rgba(47, 106, 66, 0.12);
|
||||
color: var(--good);
|
||||
}
|
||||
|
||||
.ref {
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.hero-grid,
|
||||
.card-grid,
|
||||
.two-col {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="shell">
|
||||
<aside class="panel nav">
|
||||
<div class="eyebrow">Maintainer Report</div>
|
||||
<h1>Report Title</h1>
|
||||
<p>Replace this with a concise description of what the report covers.</p>
|
||||
<ul>
|
||||
<li><a href="#summary">Summary</a></li>
|
||||
<li><a href="#tutorial">Tutorial</a></li>
|
||||
<li><a href="#findings">Findings</a></li>
|
||||
<li><a href="#recommendation">Recommendation</a></li>
|
||||
</ul>
|
||||
<div class="meta-block">
|
||||
Replace with project metadata, review date, or scope notes.
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main>
|
||||
<section class="panel hero" id="summary">
|
||||
<div class="eyebrow">Executive Summary</div>
|
||||
<h1>Use the hero for the clearest one-line judgment.</h1>
|
||||
<p class="lede">
|
||||
Replace this with the short explanation of what the contribution does, why it matters,
|
||||
and what the core maintainer question is.
|
||||
</p>
|
||||
<div class="badge-row">
|
||||
<span class="badge good">Strength</span>
|
||||
<span class="badge warn">Tradeoff</span>
|
||||
<span class="badge bad">Risk</span>
|
||||
</div>
|
||||
<div class="hero-grid">
|
||||
<div class="metric">
|
||||
<div class="label">Overall Call</div>
|
||||
<div class="value">Placeholder</div>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<div class="label">Main Concern</div>
|
||||
<div class="value">Placeholder</div>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<div class="label">Best Part</div>
|
||||
<div class="value">Placeholder</div>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<div class="label">Weakest Part</div>
|
||||
<div class="value">Placeholder</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="quote">
|
||||
Use this block for the thesis, a sharp takeaway, or a key cited point.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="tutorial">
|
||||
<h2>Tutorial Section</h2>
|
||||
<div class="two-col">
|
||||
<div class="card">
|
||||
<h3>Concept Card</h3>
|
||||
<p>Use cards for mental models, subsystems, or comparison slices.</p>
|
||||
<div class="ref">path/to/file.ts:10</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Second Card</h3>
|
||||
<p>Keep cards fairly dense. This template is about style, not fixed structure.</p>
|
||||
<div class="ref">path/to/file.ts:20</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="findings">
|
||||
<h2>Findings</h2>
|
||||
<article class="finding">
|
||||
<div class="severity high">High</div>
|
||||
<h3>Finding Title</h3>
|
||||
<p>Use findings for the sharpest judgment calls and risks.</p>
|
||||
<div class="ref">path/to/file.ts:30</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="recommendation">
|
||||
<h2>Recommendation</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<h3>Path Forward</h3>
|
||||
<p>Use this area for merge guidance, salvage plan, or rollout advice.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>What To Keep</h3>
|
||||
<p>Call out the parts worth preserving even if the whole proposal should not land.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,149 +0,0 @@
|
||||
# PR Report Style Guide
|
||||
|
||||
Use this guide when the user wants a report artifact, especially a webpage.
|
||||
|
||||
## Goal
|
||||
|
||||
Make the report feel like an editorial review, not an internal admin dashboard.
|
||||
The page should make a long technical argument easy to scan without looking
|
||||
generic or overdesigned.
|
||||
|
||||
## Visual Direction
|
||||
|
||||
Preferred tone:
|
||||
|
||||
- editorial
|
||||
- warm
|
||||
- serious
|
||||
- high-contrast
|
||||
- handcrafted, not corporate SaaS
|
||||
|
||||
Avoid:
|
||||
|
||||
- default app-shell layouts
|
||||
- purple gradients on white
|
||||
- generic card dashboards
|
||||
- cramped pages with weak hierarchy
|
||||
- novelty fonts that hurt readability
|
||||
|
||||
## Typography
|
||||
|
||||
Recommended pattern:
|
||||
|
||||
- one expressive serif or display face for major headings
|
||||
- one sturdy sans-serif for body copy and UI labels
|
||||
|
||||
Good combinations:
|
||||
|
||||
- Newsreader + IBM Plex Sans
|
||||
- Source Serif 4 + Instrument Sans
|
||||
- Fraunces + Public Sans
|
||||
- Libre Baskerville + Work Sans
|
||||
|
||||
Rules:
|
||||
|
||||
- headings should feel deliberate and large
|
||||
- body copy should stay comfortable for long reading
|
||||
- reference labels and badges should use smaller dense sans text
|
||||
|
||||
## Layout
|
||||
|
||||
Recommended structure:
|
||||
|
||||
- a sticky side or top navigation for long reports
|
||||
- one strong hero summary at the top
|
||||
- panel or paper-like sections for each major topic
|
||||
- multi-column card grids for comparisons and strengths
|
||||
- single-column body text for findings and recommendations
|
||||
|
||||
Use generous spacing. Long-form technical reports need breathing room.
|
||||
|
||||
## Color
|
||||
|
||||
Prefer muted paper-like backgrounds with one warm accent and one cool counterweight.
|
||||
|
||||
Suggested token categories:
|
||||
|
||||
- `--bg`
|
||||
- `--paper`
|
||||
- `--ink`
|
||||
- `--muted`
|
||||
- `--line`
|
||||
- `--accent`
|
||||
- `--good`
|
||||
- `--warn`
|
||||
- `--bad`
|
||||
|
||||
The accent should highlight navigation, badges, and important labels. Do not
|
||||
let accent colors dominate body text.
|
||||
|
||||
## Useful UI Elements
|
||||
|
||||
Include small reusable styles for:
|
||||
|
||||
- summary metrics
|
||||
- badges
|
||||
- quotes or callouts
|
||||
- finding cards
|
||||
- severity labels
|
||||
- reference labels
|
||||
- comparison cards
|
||||
- responsive two-column sections
|
||||
|
||||
## Motion
|
||||
|
||||
Keep motion restrained.
|
||||
|
||||
Good:
|
||||
|
||||
- soft fade/slide-in on first load
|
||||
- hover response on nav items or cards
|
||||
|
||||
Bad:
|
||||
|
||||
- constant animation
|
||||
- floating blobs
|
||||
- decorative motion with no reading benefit
|
||||
|
||||
## Content Presentation
|
||||
|
||||
Even when the user wants design polish, clarity stays primary.
|
||||
|
||||
Good structure for long reports:
|
||||
|
||||
1. executive summary
|
||||
2. what changed
|
||||
3. tutorial explanation
|
||||
4. strengths
|
||||
5. findings
|
||||
6. comparisons
|
||||
7. recommendation
|
||||
|
||||
The exact headings can change. The important thing is to separate explanation
|
||||
from judgment.
|
||||
|
||||
## References
|
||||
|
||||
Reference labels should be visually quiet but easy to spot.
|
||||
|
||||
Good pattern:
|
||||
|
||||
- small muted text
|
||||
- monospace or compact sans
|
||||
- keep them close to the paragraph they support
|
||||
|
||||
## Starter Usage
|
||||
|
||||
If you need a fast polished base, start from:
|
||||
|
||||
- `assets/html-report-starter.html`
|
||||
|
||||
Customize:
|
||||
|
||||
- fonts
|
||||
- color tokens
|
||||
- hero copy
|
||||
- section ordering
|
||||
- card density
|
||||
|
||||
Do not preserve the placeholder sections if they do not fit the actual report.
|
||||
@@ -1,118 +0,0 @@
|
||||
---
|
||||
name: quieter
|
||||
description: Tone down overly bold or visually aggressive designs. Reduces intensity while maintaining design quality and impact.
|
||||
user-invokable: true
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or component to make quieter (optional)
|
||||
required: false
|
||||
---
|
||||
|
||||
Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness.
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
### Context Gathering (Do This First)
|
||||
|
||||
You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality/tone, and everything else that a great human designer would need as well.
|
||||
|
||||
Attempt to gather these from the current thread or codebase.
|
||||
|
||||
1. If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and STOP and call the AskUserQuestionTool to clarify. whether you got it right.
|
||||
2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context.
|
||||
|
||||
Do NOT proceed until you have answers. Guessing leads to generic design.
|
||||
|
||||
### Use frontend-design skill
|
||||
|
||||
Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
|
||||
|
||||
---
|
||||
|
||||
## Assess Current State
|
||||
|
||||
Analyze what makes the design feel too intense:
|
||||
|
||||
1. **Identify intensity sources**:
|
||||
- **Color saturation**: Overly bright or saturated colors
|
||||
- **Contrast extremes**: Too much high-contrast juxtaposition
|
||||
- **Visual weight**: Too many bold, heavy elements competing
|
||||
- **Animation excess**: Too much motion or overly dramatic effects
|
||||
- **Complexity**: Too many visual elements, patterns, or decorations
|
||||
- **Scale**: Everything is large and loud with no hierarchy
|
||||
|
||||
2. **Understand the context**:
|
||||
- What's the purpose? (Marketing vs tool vs reading experience)
|
||||
- Who's the audience? (Some contexts need energy)
|
||||
- What's working? (Don't throw away good ideas)
|
||||
- What's the core message? (Preserve what matters)
|
||||
|
||||
If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify.
|
||||
|
||||
**CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness.
|
||||
|
||||
## Plan Refinement
|
||||
|
||||
Create a strategy to reduce intensity while maintaining impact:
|
||||
|
||||
- **Color approach**: Desaturate or shift to more sophisticated tones?
|
||||
- **Hierarchy approach**: Which elements should stay bold (very few), which should recede?
|
||||
- **Simplification approach**: What can be removed entirely?
|
||||
- **Sophistication approach**: How can we signal quality through restraint?
|
||||
|
||||
**IMPORTANT**: Great quiet design is harder than great bold design. Subtlety requires precision.
|
||||
|
||||
## Refine the Design
|
||||
|
||||
Systematically reduce intensity across these dimensions:
|
||||
|
||||
### Color Refinement
|
||||
- **Reduce saturation**: Shift from fully saturated to 70-85% saturation
|
||||
- **Soften palette**: Replace bright colors with muted, sophisticated tones
|
||||
- **Reduce color variety**: Use fewer colors more thoughtfully
|
||||
- **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule)
|
||||
- **Gentler contrasts**: High contrast only where it matters most
|
||||
- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness
|
||||
- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead
|
||||
|
||||
### Visual Weight Reduction
|
||||
- **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate
|
||||
- **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness
|
||||
- **White space**: Increase breathing room, reduce density
|
||||
- **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely
|
||||
|
||||
### Simplification
|
||||
- **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose
|
||||
- **Simplify shapes**: Reduce border radius extremes, simplify custom shapes
|
||||
- **Reduce layering**: Flatten visual hierarchy where possible
|
||||
- **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows
|
||||
|
||||
### Motion Reduction
|
||||
- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing
|
||||
- **Remove decorative animations**: Keep functional motion, remove flourishes
|
||||
- **Subtle micro-interactions**: Replace dramatic effects with gentle feedback
|
||||
- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic
|
||||
- **Remove animations entirely** if they're not serving a clear purpose
|
||||
|
||||
### Composition Refinement
|
||||
- **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling
|
||||
- **Align to grid**: Bring rogue elements back into systematic alignment
|
||||
- **Even out spacing**: Replace extreme spacing variations with consistent rhythm
|
||||
|
||||
**NEVER**:
|
||||
- Make everything the same size/weight (hierarchy still matters)
|
||||
- Remove all color (quiet ≠ grayscale)
|
||||
- Eliminate all personality (maintain character through refinement)
|
||||
- Sacrifice usability for aesthetics (functional elements still need clear affordances)
|
||||
- Make everything small and light (some anchors needed)
|
||||
|
||||
## Verify Quality
|
||||
|
||||
Ensure refinement maintains quality:
|
||||
|
||||
- **Still functional**: Can users still accomplish tasks easily?
|
||||
- **Still distinctive**: Does it have character, or is it generic now?
|
||||
- **Better reading**: Is text easier to read for extended periods?
|
||||
- **Sophistication**: Does it feel more refined and premium?
|
||||
|
||||
Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality.
|
||||
@@ -1,178 +0,0 @@
|
||||
---
|
||||
name: release-changelog
|
||||
description: >
|
||||
Generate the stable Paperclip release changelog at releases/v{version}.md by
|
||||
reading commits, changesets, and merged PR context since the last stable tag.
|
||||
---
|
||||
|
||||
# Release Changelog Skill
|
||||
|
||||
Generate the user-facing changelog for the **stable** Paperclip release.
|
||||
|
||||
Output:
|
||||
|
||||
- `releases/v{version}.md`
|
||||
|
||||
Important rule:
|
||||
|
||||
- even if there are canary releases such as `1.2.3-canary.0`, the changelog file stays `releases/v1.2.3.md`
|
||||
|
||||
## Step 0 — Idempotency Check
|
||||
|
||||
Before generating anything, check whether the file already exists:
|
||||
|
||||
```bash
|
||||
ls releases/v{version}.md 2>/dev/null
|
||||
```
|
||||
|
||||
If it exists:
|
||||
|
||||
1. read it first
|
||||
2. present it to the reviewer
|
||||
3. ask whether to keep it, regenerate it, or update specific sections
|
||||
4. never overwrite it silently
|
||||
|
||||
## Step 1 — Determine the Stable Range
|
||||
|
||||
Find the last stable tag:
|
||||
|
||||
```bash
|
||||
git tag --list 'v*' --sort=-version:refname | head -1
|
||||
git log v{last}..HEAD --oneline --no-merges
|
||||
```
|
||||
|
||||
The planned stable version comes from one of:
|
||||
|
||||
- an explicit maintainer request
|
||||
- the chosen bump type applied to the last stable tag
|
||||
- the release plan already agreed in `doc/RELEASING.md`
|
||||
|
||||
Do not derive the changelog version from a canary tag or prerelease suffix.
|
||||
|
||||
## Step 2 — Gather the Raw Inputs
|
||||
|
||||
Collect release data from:
|
||||
|
||||
1. git commits since the last stable tag
|
||||
2. `.changeset/*.md` files
|
||||
3. merged PRs via `gh` when available
|
||||
|
||||
Useful commands:
|
||||
|
||||
```bash
|
||||
git log v{last}..HEAD --oneline --no-merges
|
||||
git log v{last}..HEAD --format="%H %s" --no-merges
|
||||
ls .changeset/*.md | grep -v README.md
|
||||
gh pr list --state merged --search "merged:>={last-tag-date}" --json number,title,body,labels
|
||||
```
|
||||
|
||||
## Step 3 — Detect Breaking Changes
|
||||
|
||||
Look for:
|
||||
|
||||
- destructive migrations
|
||||
- removed or changed API fields/endpoints
|
||||
- renamed or removed config keys
|
||||
- `major` changesets
|
||||
- `BREAKING:` or `BREAKING CHANGE:` commit signals
|
||||
|
||||
Key commands:
|
||||
|
||||
```bash
|
||||
git diff --name-only v{last}..HEAD -- packages/db/src/migrations/
|
||||
git diff v{last}..HEAD -- packages/db/src/schema/
|
||||
git diff v{last}..HEAD -- server/src/routes/ server/src/api/
|
||||
git log v{last}..HEAD --format="%s" | rg -n 'BREAKING CHANGE|BREAKING:|^[a-z]+!:' || true
|
||||
```
|
||||
|
||||
If the requested bump is lower than the minimum required bump, flag that before the release proceeds.
|
||||
|
||||
## Step 4 — Categorize for Users
|
||||
|
||||
Use these stable changelog sections:
|
||||
|
||||
- `Breaking Changes`
|
||||
- `Highlights`
|
||||
- `Improvements`
|
||||
- `Fixes`
|
||||
- `Upgrade Guide` when needed
|
||||
|
||||
Exclude purely internal refactors, CI changes, and docs-only work unless they materially affect users.
|
||||
|
||||
Guidelines:
|
||||
|
||||
- group related commits into one user-facing entry
|
||||
- write from the user perspective
|
||||
- keep highlights short and concrete
|
||||
- spell out upgrade actions for breaking changes
|
||||
|
||||
### Inline PR and contributor attribution
|
||||
|
||||
When a bullet item clearly maps to a merged pull request, add inline attribution at the
|
||||
end of the entry in this format:
|
||||
|
||||
```
|
||||
- **Feature name** — Description. ([#123](https://github.com/paperclipai/paperclip/pull/123), @contributor1, @contributor2)
|
||||
```
|
||||
|
||||
Rules:
|
||||
|
||||
- Only add a PR link when you can confidently trace the bullet to a specific merged PR.
|
||||
Use merge commit messages (`Merge pull request #N from user/branch`) to map PRs.
|
||||
- List the contributor(s) who authored the PR. Use GitHub usernames, not real names or emails.
|
||||
- If multiple PRs contributed to a single bullet, list them all: `([#10](url), [#12](url), @user1, @user2)`.
|
||||
- If you cannot determine the PR number or contributor with confidence, omit the attribution
|
||||
parenthetical — do not guess.
|
||||
- Core maintainer commits that don't have an external PR can omit the parenthetical.
|
||||
|
||||
## Step 5 — Write the File
|
||||
|
||||
Template:
|
||||
|
||||
```markdown
|
||||
# v{version}
|
||||
|
||||
> Released: {YYYY-MM-DD}
|
||||
|
||||
## Breaking Changes
|
||||
|
||||
## Highlights
|
||||
|
||||
## Improvements
|
||||
|
||||
## Fixes
|
||||
|
||||
## Upgrade Guide
|
||||
|
||||
## Contributors
|
||||
|
||||
Thank you to everyone who contributed to this release!
|
||||
|
||||
@username1, @username2, @username3
|
||||
```
|
||||
|
||||
Omit empty sections except `Highlights`, `Improvements`, and `Fixes`, which should usually exist.
|
||||
|
||||
The `Contributors` section should always be included. List every person who authored
|
||||
commits in the release range, @-mentioning them by their **GitHub username** (not their
|
||||
real name or email). To find GitHub usernames:
|
||||
|
||||
1. Extract usernames from merge commit messages: `git log v{last}..HEAD --oneline --merges` — the branch prefix (e.g. `from username/branch`) gives the GitHub username.
|
||||
2. For noreply emails like `user@users.noreply.github.com`, the username is the part before `@`.
|
||||
3. For contributors whose username is ambiguous, check `gh api users/{guess}` or the PR page.
|
||||
|
||||
**Never expose contributor email addresses.** Use `@username` only.
|
||||
|
||||
Exclude bot accounts (e.g. `lockfile-bot`, `dependabot`) from the list. List contributors
|
||||
in alphabetical order by GitHub username (case-insensitive).
|
||||
|
||||
## Step 6 — Review Before Release
|
||||
|
||||
Before handing it off:
|
||||
|
||||
1. confirm the heading is the stable version only
|
||||
2. confirm there is no `-canary` language in the title or filename
|
||||
3. confirm any breaking changes have an upgrade path
|
||||
4. present the draft for human sign-off
|
||||
|
||||
This skill never publishes anything. It only prepares the stable changelog artifact.
|
||||
@@ -1,261 +0,0 @@
|
||||
---
|
||||
name: release
|
||||
description: >
|
||||
Coordinate a full Paperclip release across engineering verification, npm,
|
||||
GitHub, website publishing, and announcement follow-up. Use when leadership
|
||||
asks to ship a release, not merely to discuss version bumps.
|
||||
---
|
||||
|
||||
# Release Coordination Skill
|
||||
|
||||
Run the full Paperclip release as a maintainer workflow, not just an npm publish.
|
||||
|
||||
This skill coordinates:
|
||||
|
||||
- stable changelog drafting via `release-changelog`
|
||||
- release-train setup via `scripts/release-start.sh`
|
||||
- prerelease canary publishing via `scripts/release.sh --canary`
|
||||
- Docker smoke testing via `scripts/docker-onboard-smoke.sh`
|
||||
- stable publishing via `scripts/release.sh`
|
||||
- pushing the stable branch commit and tag
|
||||
- GitHub Release creation via `scripts/create-github-release.sh`
|
||||
- website / announcement follow-up tasks
|
||||
|
||||
## Trigger
|
||||
|
||||
Use this skill when leadership asks for:
|
||||
|
||||
- "do a release"
|
||||
- "ship the next patch/minor/major"
|
||||
- "release vX.Y.Z"
|
||||
|
||||
## Preconditions
|
||||
|
||||
Before proceeding, verify all of the following:
|
||||
|
||||
1. `skills/release-changelog/SKILL.md` exists and is usable.
|
||||
2. The repo working tree is clean, including untracked files.
|
||||
3. There are commits since the last stable tag.
|
||||
4. The release SHA has passed the verification gate or is about to.
|
||||
5. If package manifests changed, the CI-owned `pnpm-lock.yaml` refresh is already merged on `master` before the release branch is cut.
|
||||
6. npm publish rights are available locally, or the GitHub release workflow is being used with trusted publishing.
|
||||
7. If running through Paperclip, you have issue context for status updates and follow-up task creation.
|
||||
|
||||
If any precondition fails, stop and report the blocker.
|
||||
|
||||
## Inputs
|
||||
|
||||
Collect these inputs up front:
|
||||
|
||||
- requested bump: `patch`, `minor`, or `major`
|
||||
- whether this run is a dry run or live release
|
||||
- whether the release is being run locally or from GitHub Actions
|
||||
- release issue / company context for website and announcement follow-up
|
||||
|
||||
## Step 0 — Release Model
|
||||
|
||||
Paperclip now uses this release model:
|
||||
|
||||
1. Start or resume `release/X.Y.Z`
|
||||
2. Draft the **stable** changelog as `releases/vX.Y.Z.md`
|
||||
3. Publish one or more **prerelease canaries** such as `X.Y.Z-canary.0`
|
||||
4. Smoke test the canary via Docker
|
||||
5. Publish the stable version `X.Y.Z`
|
||||
6. Push the stable branch commit and tag
|
||||
7. Create the GitHub Release
|
||||
8. Merge `release/X.Y.Z` back to `master` without squash or rebase
|
||||
9. Complete website and announcement surfaces
|
||||
|
||||
Critical consequence:
|
||||
|
||||
- Canaries do **not** use promote-by-dist-tag anymore.
|
||||
- The changelog remains stable-only. Do not create `releases/vX.Y.Z-canary.N.md`.
|
||||
|
||||
## Step 1 — Decide the Stable Version
|
||||
|
||||
Start the release train first:
|
||||
|
||||
```bash
|
||||
./scripts/release-start.sh {patch|minor|major}
|
||||
```
|
||||
|
||||
Then run release preflight:
|
||||
|
||||
```bash
|
||||
./scripts/release-preflight.sh canary {patch|minor|major}
|
||||
# or
|
||||
./scripts/release-preflight.sh stable {patch|minor|major}
|
||||
```
|
||||
|
||||
Then use the last stable tag as the base:
|
||||
|
||||
```bash
|
||||
LAST_TAG=$(git tag --list 'v*' --sort=-version:refname | head -1)
|
||||
git log "${LAST_TAG}..HEAD" --oneline --no-merges
|
||||
git diff --name-only "${LAST_TAG}..HEAD" -- packages/db/src/migrations/
|
||||
git diff "${LAST_TAG}..HEAD" -- packages/db/src/schema/
|
||||
git log "${LAST_TAG}..HEAD" --format="%s" | rg -n 'BREAKING CHANGE|BREAKING:|^[a-z]+!:' || true
|
||||
```
|
||||
|
||||
Bump policy:
|
||||
|
||||
- destructive migrations, removed APIs, breaking config changes -> `major`
|
||||
- additive migrations or clearly user-visible features -> at least `minor`
|
||||
- fixes only -> `patch`
|
||||
|
||||
If the requested bump is too low, escalate it and explain why.
|
||||
|
||||
## Step 2 — Draft the Stable Changelog
|
||||
|
||||
Invoke `release-changelog` and generate:
|
||||
|
||||
- `releases/vX.Y.Z.md`
|
||||
|
||||
Rules:
|
||||
|
||||
- review the draft with a human before publish
|
||||
- preserve manual edits if the file already exists
|
||||
- keep the heading and filename stable-only, for example `v1.2.3`
|
||||
- do not create a separate canary changelog file
|
||||
|
||||
## Step 3 — Verify the Release SHA
|
||||
|
||||
Run the standard gate:
|
||||
|
||||
```bash
|
||||
pnpm -r typecheck
|
||||
pnpm test:run
|
||||
pnpm build
|
||||
```
|
||||
|
||||
If the release will be run through GitHub Actions, the workflow can rerun this gate. Still report whether the local tree currently passes.
|
||||
|
||||
The GitHub Actions release workflow installs with `pnpm install --frozen-lockfile`. Treat that as a release invariant, not a nuisance: if manifests changed and the lockfile refresh PR has not landed yet, stop and wait for `master` to contain the committed lockfile before shipping.
|
||||
|
||||
## Step 4 — Publish a Canary
|
||||
|
||||
Run from the `release/X.Y.Z` branch:
|
||||
|
||||
```bash
|
||||
./scripts/release.sh {patch|minor|major} --canary --dry-run
|
||||
./scripts/release.sh {patch|minor|major} --canary
|
||||
```
|
||||
|
||||
What this means:
|
||||
|
||||
- npm receives `X.Y.Z-canary.N` under dist-tag `canary`
|
||||
- `latest` remains unchanged
|
||||
- no git tag is created
|
||||
- the script cleans the working tree afterward
|
||||
|
||||
Guard:
|
||||
|
||||
- if the current stable is `0.2.7`, the next patch canary is `0.2.8-canary.0`
|
||||
- the tooling must never publish `0.2.7-canary.N` after `0.2.7` is already stable
|
||||
|
||||
After publish, verify:
|
||||
|
||||
```bash
|
||||
npm view paperclipai@canary version
|
||||
```
|
||||
|
||||
The user install path is:
|
||||
|
||||
```bash
|
||||
npx paperclipai@canary onboard
|
||||
```
|
||||
|
||||
## Step 5 — Smoke Test the Canary
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
PAPERCLIPAI_VERSION=canary ./scripts/docker-onboard-smoke.sh
|
||||
```
|
||||
|
||||
Confirm:
|
||||
|
||||
1. install succeeds
|
||||
2. onboarding completes
|
||||
3. server boots
|
||||
4. UI loads
|
||||
5. basic company/dashboard flow works
|
||||
|
||||
If smoke testing fails:
|
||||
|
||||
- stop the stable release
|
||||
- fix the issue
|
||||
- publish another canary
|
||||
- repeat the smoke test
|
||||
|
||||
Each retry should create a higher canary ordinal, while the stable target version can stay the same.
|
||||
|
||||
## Step 6 — Publish Stable
|
||||
|
||||
Once the SHA is vetted, run:
|
||||
|
||||
```bash
|
||||
./scripts/release.sh {patch|minor|major} --dry-run
|
||||
./scripts/release.sh {patch|minor|major}
|
||||
```
|
||||
|
||||
Stable publish does this:
|
||||
|
||||
- publishes `X.Y.Z` to npm under `latest`
|
||||
- creates the local release commit
|
||||
- creates the local git tag `vX.Y.Z`
|
||||
|
||||
Stable publish does **not** push the release for you.
|
||||
|
||||
## Step 7 — Push and Create GitHub Release
|
||||
|
||||
After stable publish succeeds:
|
||||
|
||||
```bash
|
||||
git push public-gh HEAD --follow-tags
|
||||
./scripts/create-github-release.sh X.Y.Z
|
||||
```
|
||||
|
||||
Use the stable changelog file as the GitHub Release notes source.
|
||||
|
||||
Then open the PR from `release/X.Y.Z` back to `master` and merge without squash or rebase.
|
||||
|
||||
## Step 8 — Finish the Other Surfaces
|
||||
|
||||
Create or verify follow-up work for:
|
||||
|
||||
- website changelog publishing
|
||||
- launch post / social announcement
|
||||
- any release summary in Paperclip issue context
|
||||
|
||||
These should reference the stable release, not the canary.
|
||||
|
||||
## Failure Handling
|
||||
|
||||
If the canary is bad:
|
||||
|
||||
- publish another canary, do not ship stable
|
||||
|
||||
If stable npm publish succeeds but push or GitHub release creation fails:
|
||||
|
||||
- fix the git/GitHub issue immediately from the same checkout
|
||||
- do not republish the same version
|
||||
|
||||
If `latest` is bad after stable publish:
|
||||
|
||||
```bash
|
||||
./scripts/rollback-latest.sh <last-good-version>
|
||||
```
|
||||
|
||||
Then fix forward with a new patch release.
|
||||
|
||||
## Output
|
||||
|
||||
When the skill completes, provide:
|
||||
|
||||
- stable version and, if relevant, the final canary version tested
|
||||
- verification status
|
||||
- npm status
|
||||
- git tag / GitHub Release status
|
||||
- website / announcement follow-up status
|
||||
- rollback recommendation if anything is still partially complete
|
||||
@@ -1,69 +0,0 @@
|
||||
---
|
||||
name: teach-impeccable
|
||||
description: One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines.
|
||||
user-invokable: true
|
||||
---
|
||||
|
||||
Gather design context for this project, then persist it for all future sessions.
|
||||
|
||||
## Step 1: Explore the Codebase
|
||||
|
||||
Before asking questions, thoroughly scan the project to discover what you can:
|
||||
|
||||
- **README and docs**: Project purpose, target audience, any stated goals
|
||||
- **Package.json / config files**: Tech stack, dependencies, existing design libraries
|
||||
- **Existing components**: Current design patterns, spacing, typography in use
|
||||
- **Brand assets**: Logos, favicons, color values already defined
|
||||
- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales
|
||||
- **Any style guides or brand documentation**
|
||||
|
||||
Note what you've learned and what remains unclear.
|
||||
|
||||
## Step 2: Ask UX-Focused Questions
|
||||
|
||||
STOP and call the AskUserQuestionTool to clarify. Focus only on what you couldn't infer from the codebase:
|
||||
|
||||
### Users & Purpose
|
||||
- Who uses this? What's their context when using it?
|
||||
- What job are they trying to get done?
|
||||
- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.)
|
||||
|
||||
### Brand & Personality
|
||||
- How would you describe the brand personality in 3 words?
|
||||
- Any reference sites or apps that capture the right feel? What specifically about them?
|
||||
- What should this explicitly NOT look like? Any anti-references?
|
||||
|
||||
### Aesthetic Preferences
|
||||
- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.)
|
||||
- Light mode, dark mode, or both?
|
||||
- Any colors that must be used or avoided?
|
||||
|
||||
### Accessibility & Inclusion
|
||||
- Specific accessibility requirements? (WCAG level, known user needs)
|
||||
- Considerations for reduced motion, color blindness, or other accommodations?
|
||||
|
||||
Skip questions where the answer is already clear from the codebase exploration.
|
||||
|
||||
## Step 3: Write Design Context
|
||||
|
||||
Synthesize your findings and the user's answers into a `## Design Context` section:
|
||||
|
||||
```markdown
|
||||
## Design Context
|
||||
|
||||
### Users
|
||||
[Who they are, their context, the job to be done]
|
||||
|
||||
### Brand Personality
|
||||
[Voice, tone, 3-word personality, emotional goals]
|
||||
|
||||
### Aesthetic Direction
|
||||
[Visual tone, references, anti-references, theme]
|
||||
|
||||
### Design Principles
|
||||
[3-5 principles derived from the conversation that should guide all design decisions]
|
||||
```
|
||||
|
||||
Write this section to OPENCODE.md in the project root. If the file exists, append or update the Design Context section.
|
||||
|
||||
Confirm completion and summarize the key design principles that will now guide all future work.
|
||||
Reference in New Issue
Block a user