skills.rest
erwaen
erwaenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design

Apply Bootstrap 5 layouts and a single stylesheet to authenticated views.

Updated Apr 20, 2026
Search Tags:#design#ui#layout#frontend#validation#ux#bootstrap
One-click install
npx skills add https://github.com/erwaen/one-shot-test --skill design-erwaen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/erwaen/one-shot-test/tree/main/.claude/skills/design
Command: npx skills add https://github.com/erwaen/one-shot-test --skill design-erwaen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Standardizes UI across all authenticated views by applying Bootstrap 5, a cohesive layout, and a minimal custom stylesheet to ensure consistent visuals and responsive behavior.

Core Features & Use Cases

  • Bootstrap 5 as the base framework for all views.
  • Left sidebar layout with a clean, minimal aesthetic.
  • A single custom stylesheet at app/assets/stylesheets/application.css for targeted overrides.
  • Typography, spacing, tables, forms, and button styles aligned with Bootstrap utilities.
  • Status badges using semantic Bootstrap classes (pending, approved, denied).
  • Flash messages as dismissible Bootstrap alerts to improve feedback.
  • Live visual validation during implementation with Chrome MCP to ensure alignment.

Quick Start

Update the layout and views to implement the new Bootstrap-based design, then use Chrome MCP to verify alignment by taking screenshots.

Frequently Asked Questions about design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize UI layout and views using Bootstrap 5?▼

Standardize UI layout by applying Bootstrap 5 as the base framework across all authenticated views, using a left sidebar layout and a single custom stylesheet for targeted overrides.

What is the best way to validate responsive UI components during implementation?▼

Validate responsive UI components live during implementation using Chrome MCP to take screenshots and verify visual alignment with Bootstrap 5 styling rules.

Do I need a specific stylesheet structure to override Bootstrap 5 utilities?▼

You need a single custom stylesheet located at app/assets/stylesheets/application.css to apply targeted style overrides while keeping Bootstrap 5 as the base framework.

How do I style status badges and flash messages with Bootstrap classes?▼

Style status badges using semantic Bootstrap classes like pending, approved, and denied, and implement flash messages as dismissible Bootstrap alerts to improve user feedback.

Can I use this approach to refine typography and spacing across dashboards and forms?▼

Refine typography, spacing, tables, forms, and button styles across dashboards and lists by aligning them with standard Bootstrap utilities for consistent visual behavior.

What are the limitations of using a single custom stylesheet for UI consistency?▼

Using a single custom stylesheet limits overrides to targeted rules at app/assets/stylesheets/application.css, requiring strict reliance on Bootstrap 5 utilities to maintain UI consistency across views.

Related Skills

Explore More Design & Creative Skills→
AgustinMadygrafAgustinMadygraf

0a-project-bootstrap-audit

Audit new Python project bootstrap structure and write findings to docs/todo.md.

Community
Intermediate
tkerseytkersey
66

web-browser

Automate Chrome/Chromium via CDP to navigate, click, fill forms, evaluate JavaScript, and capture screenshots.

Community
Intermediate
bughqbughq
2

stacks-crosswind

Generate optimized CSS from utility classes and custom rules in Bun-based Stacks applications.

Official
Intermediate
ancolemanancoleman
503

designing-layouts

Design responsive layouts with CSS Grid, Flexbox, and breakpoints.

Community
Advanced