Styling Interfaces
by mar2181
Logic for creating high-fidelity, vibrant, and stunning user interfaces and dashboards. Use when the user wants to improve the aesthetics of their web application.
Skill Details
Repository Files
1 file in this skill directory
name: styling-interfaces description: Logic for creating high-fidelity, vibrant, and stunning user interfaces and dashboards. Use when the user wants to improve the aesthetics of their web application.
Gorgeous UI Framework
When to use this skill
- When building a "Gorgeous UI Dashboard" or any premium web interface.
- When the user asks for "wow" factor, vibrant aesthetics, or modern design.
Design Principles
- Vibrant Aesthetics: Avoid generic colors. Use curated, harmonious palettes (e.g., HSL tailored colors, sleek dark modes).
- Glassmorphism: Use translucent backgrounds with backdrop-blur for a premium feel.
- Smooth Gradients: Implement subtle, multi-stop gradients for depth and movement.
- Modern Typography: Use clean sans-serif fonts (e.g., Inter, Outfit, Roboto) with a clear hierarchy.
- Micro-Animations: Add subtle hover effects, transitions, and entry animations to make the UI feel alive.
- Generous Spacing: Ensure plenty of white space ("breathing room") to maintain clarity and tidiness.
- Card-Based Layout: Organize components into distinct, elevated cards with subtle shadows.
Standard UI Components
- Collapsible Sidebar: For clean navigation.
- KPI Metric Cards: High-impact data displays at the top.
- Interactive Data Viz: Beautiful line/bar charts with smooth animations (e.g., using Recharts or Chart.js).
- Responsive Tables: Clean, paginated, and sortable data grids.
Prompting for Gorgeous UI
When generating code for a gorgeous UI, always include instructions for:
- Theme (Dark/Light/Both)
- Primary/Accent color palette
- CSS utility classes for glass effect
- Animation triggers (e.g.,
framer-motionor CSS transitions)
Related Skills
Attack Tree Construction
Build comprehensive attack trees to visualize threat paths. Use when mapping attack scenarios, identifying defense gaps, or communicating security risks to stakeholders.
Grafana Dashboards
Create and manage production Grafana dashboards for real-time visualization of system and application metrics. Use when building monitoring dashboards, visualizing metrics, or creating operational observability interfaces.
Matplotlib
Foundational plotting library. Create line plots, scatter, bar, histograms, heatmaps, 3D, subplots, export PNG/PDF/SVG, for scientific visualization and publication figures.
Scientific Visualization
Create publication figures with matplotlib/seaborn/plotly. Multi-panel layouts, error bars, significance markers, colorblind-safe, export PDF/EPS/TIFF, for journal-ready scientific plots.
Seaborn
Statistical visualization. Scatter, box, violin, heatmaps, pair plots, regression, correlation matrices, KDE, faceted plots, for exploratory analysis and publication figures.
Shap
Model interpretability and explainability using SHAP (SHapley Additive exPlanations). Use this skill when explaining machine learning model predictions, computing feature importance, generating SHAP plots (waterfall, beeswarm, bar, scatter, force, heatmap), debugging models, analyzing model bias or fairness, comparing models, or implementing explainable AI. Works with tree-based models (XGBoost, LightGBM, Random Forest), deep learning (TensorFlow, PyTorch), linear models, and any black-box model
Pydeseq2
Differential gene expression analysis (Python DESeq2). Identify DE genes from bulk RNA-seq counts, Wald tests, FDR correction, volcano/MA plots, for RNA-seq analysis.
Query Writing
For writing and executing SQL queries - from simple single-table queries to complex multi-table JOINs and aggregations
Pydeseq2
Differential gene expression analysis (Python DESeq2). Identify DE genes from bulk RNA-seq counts, Wald tests, FDR correction, volcano/MA plots, for RNA-seq analysis.
Scientific Visualization
Meta-skill for publication-ready figures. Use when creating journal submission figures requiring multi-panel layouts, significance annotations, error bars, colorblind-safe palettes, and specific journal formatting (Nature, Science, Cell). Orchestrates matplotlib/seaborn/plotly with publication styles. For quick exploration use seaborn or plotly directly.