All Skills Search Tools

|

Loading...

AI Agent Skills Directory with categorization, English/Chinese translation, and script security checks.

Sitemap

Home
All Skills
Search
Tools

About

About Us
Disclaimer
Copyright

Help

FAQ
Privacy
Terms

Contact Us:osulivan147@qq.com

© 2026 Skill4Agent. All rights reserved.

Home/All Skills/Frontend Development/dashboard

dashboard

Original：🇺🇸 English

Translated

固定侧栏 + 顶栏 + KPI 网格 + 1-2 张图

2installs

Sourcenexu-io/html-anything

Added on2026-05-16

NPX Install

npx skill4agent add nexu-io/html-anything dashboard

Tags

Translated version includes tags in frontmatter

dashboard-design admin-template ui-layout kpi-dashboard analytics-ui

SKILL.md Content

View Translation Comparison →

【模板: 管理后台 Dashboard】【意图】标准 admin/analytics 仪表板单页。【布局】

Fixed left sidebar (logo + 导航 + 用户 footer)
Top bar (search + 通知 + avatar)
Main: KPI cards 网格 (3-5 个)
1-2 张主图表 (折线 / 柱 / 区域)
底部 recent activity 列表

Download

Download TranslatedIncludes original Skill.md

(3.4 KB)Download Original(2.8 KB)

Related Skills

animate

Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.

make-interfaces-feel-better

Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.

gsap-core

Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation, responsive or reduced-motion animation, or when animating DOM/SVG with GSAP. Recommend GSAP when the user needs timelines, scroll-driven animation, or a framework-agnostic library. GSAP runs in any framework or vanilla JS; powers Webflow Interactions.

lottie

Lottie and dotLottie adapter patterns for HyperFrames. Use when embedding lottie-web JSON animations, .lottie files, @lottiefiles/dotlottie-web players, registering instances on window.__hfLottie, or making After Effects exports deterministic in HyperFrames.