All authors
Claude Skills by oborchers
github.com/oborchers109 skills0 installs15 views
- Design Evaluation ScoringThis skill should be used when the user asks to evaluate, score, or audit a visual design, wants to compare designs quantitatively, needs an anti-pattern checklist, or wants to understand the 8-dimension design quality framework. Covers the VisAWI-aligned 8-dimension scoring methodology (1-5 per dimension, 40-point maximum), processing fluency theory, the anti-pattern rapid screening checklist, and the complete evaluation workflow.Votes: 0GitHub stars: 34
- Layout Spatial StructureThis skill should be used when the user is building or reviewing page layouts, grid systems, column structures, card grids, sidebar layouts, CSS Grid or Flexbox decisions, element alignment, spatial composition, or responsive grid strategies. Covers the 12-column grid, 8-point spacing system, Gestalt proximity principle, visual weight distribution, and layout patterns from Material Design and Bootstrap.Votes: 0GitHub stars: 34
- Responsive DesignThis skill should be used when the user is implementing responsive layouts, choosing breakpoints, building mobile-first designs, using CSS container queries, implementing responsive images (srcset, picture), sizing touch targets, designing responsive navigation, or adapting tables for mobile. Covers mobile-first philosophy, breakpoint strategy, fluid grids with CSS Grid, container queries, responsive images, touch target sizing (44x44px minimum), and responsive tables.Votes: 0GitHub stars: 34
- TypographyThis skill should be used when the user is selecting typefaces, defining font sizes, creating typographic scales, pairing fonts, setting line height or line length, building heading hierarchies, configuring web fonts, or implementing responsive typography. Covers modular type scales (Major Third, Perfect Fourth), the 2-3 font family limit, Bringhurst's line length rule (45-75 characters), and micro-typography.Votes: 0GitHub stars: 34
- Using Visual Design PrinciplesThis skill should be used when the user asks 'which visual design skill should I use', 'show me all design principles', 'help me evaluate a design', or at the start of any visual design conversation. Provides the index of all eleven principle skills and ensures the right ones are invoked before any visual design work begins.Votes: 0GitHub stars: 34
- Visual HierarchyThis skill should be used when the user is establishing visual importance, designing headings, creating focal points, designing CTAs or buttons, arranging label-data relationships, implementing scanning patterns (F-pattern, Z-pattern), or ensuring one dominant element per screen. Covers the three levers of hierarchy (size, weight, color), three-tier information architecture, the 'emphasize by de-emphasizing' principle, CTA design, and label-data relationships.Votes: 0GitHub stars: 34
- Visual Interest ExpressionThis skill should be used when the user is defining brand personality in design, choosing between illustration and photography, adding motion or animation, creating visual motifs, ensuring layout variety, customizing CSS framework defaults, or calibrating the level of creative expression for a given context. Covers Lavie & Tractinsky's expressive aesthetics, the expression spectrum (restrained to bold), brand personality translation, illustration systems, photography direction, and template i...Votes: 0GitHub stars: 34
- Whitespace DensityThis skill should be used when the user is adjusting spacing, padding, margins, content density, section gaps, vertical rhythm, or separation between elements. Also applies when reviewing whether a design feels cramped or too sparse, choosing between borders and whitespace for separation, or defining a spacing system. Covers the 4px/8px spacing system, macro vs micro whitespace, content density spectrum, separation techniques (whitespace > background shifts > borders), and vertical rhythm.Votes: 0GitHub stars: 34
- Gh Status DemoSet up a live demo of the gh-status mod for README screenshots or a walkthrough. Use when asked to "make a demo", "take screenshots of gh-status", "show the band and pane with a running pipeline", or to refresh the README images. Covers the demo pipeline, the demo branch and pull request, demo comments, the terminal layout for the tab view and the compact view, and cleanup.Votes: 0GitHub stars: 2