Agent Skills Library
This library provides downloadable skill files for AI agents working on Vicinity Labs projects. Each .md file contains comprehensive instructions, patterns, and best practices. Use these skills to ensure consistency across all development work.
How to Use Agent Skills
- 1. Download the skill files you need using the download button on each card.
- 2. Reference them in your AI agent prompts or include them in your context window.
- 3. Apply the patterns and principles when building components, pages, or slides.
- 4. Maintain consistency by following the established design tokens and component usage.
Available Skills
Vicinity Design System
Complete guidance for working with the Vicinity Labs design system. Covers color tokens, typography, components, and implementation patterns.
Slide Creation & Usage
How to create presentation slides using system components. Includes slide variants, formatting guidelines, and common patterns for consulting decks.
Component Implementation
Template and guidelines for creating new components that integrate seamlessly with the design system. Includes accessibility and interaction patterns.
Responsive & Mobile Design
Responsive design patterns for desktop, tablet, and mobile. Breakpoints, grid layouts, and mobile-first considerations.
Making It Real: Quick Guide
For Design Implementation
- → Start with the Vicinity Design System skill to understand tokens and patterns.
- → Use existing components from
src/components/before building new ones. - → Follow the Component Implementation skill when creating new Astro components.
- → Test responsive behavior using the Responsive & Mobile skill guidelines.
For Slide Creation
- → Slides use the same components as the rest of the design system.
- → Reference the Slide Creation & Usage skill for slide variants and patterns.
- → All charts, cards, and UI elements can be used in 1920x1080 slide layouts.
- → See the existing
slides.astropage for working examples.
Integration with AI Workflows
These skill files are designed to be integrated into AI agent workflows. Include them in:
- • RAG (Retrieval-Augmented Generation) knowledge bases
- • System prompts for code generation agents
- • Context windows for design implementation tasks
- • Team onboarding documentation
Note: These skills will soon be available in library format (similar to Tailwind CSS) for even easier integration.