AI SummaryHeuristic scoring (no AI key configured).
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to add the "play-chart — Cursor Rules" prompt rules to my project. Repository: https://github.com/kenneth-kang/play-chart Please read the repo to find the rules/prompt file, then: 1. Download it to the correct location (.cursorrules, .windsurfrules, .github/prompts/, or project root — based on the file type) 2. If there's an existing rules file, merge the new rules in rather than overwriting 3. Confirm what was added
Description
D3 기반 시각화 라이브러리
Frontend Design Guideline
This document summarizes key frontend design principles and rules, showcasing recommended patterns. Follow these guidelines when writing frontend code.
Readability
Improving the clarity and ease of understanding code.
Naming Magic Numbers
Rule: Replace magic numbers with named constants for clarity. Reasoning: • Improves clarity by giving semantic meaning to unexplained values. • Enhances maintainability. Recommended Pattern: `typescript const ANIMATION_DELAY_MS = 300; async function onLikeClick() { await postLike(url); await delay(ANIMATION_DELAY_MS); // Clearly indicates waiting for animation await refetchPostLike(); } `
Abstracting Implementation Details
Rule: Abstract complex logic/interactions into dedicated components/HOCs. Reasoning: • Reduces cognitive load by separating concerns. • Improves readability, testability, and maintainability of components. Recommended Pattern 1: Auth Guard (Login check abstracted to a wrapper/guard component) `tsx // App structure function App() { return ( <AuthGuard> {" "} {/ Wrapper handles auth check /} <LoginStartPage /> </AuthGuard> ); } // AuthGuard component encapsulates the check/redirect logic function AuthGuard({ children }) { const status = useCheckLoginStatus(); useEffect(() => { if (status === "LOGGED_IN") { location.href = "/home"; } }, [status]); // Render children only if not logged in, otherwise render null (or loading) return status !== "LOGGED_IN" ? children : null; } // LoginStartPage is now simpler, focused only on login UI/logic function LoginStartPage() { // ... login related logic ONLY ... return <>{/ ... login related components ... /}</>; } ` Recommended Pattern 2: Dedicated Interaction Component (Dialog logic abstracted into a dedicated InviteButton component) `tsx export function FriendInvitation() { const { data } = useQuery(/ ... /); return ( <> {/ Use the dedicated button component /} <InviteButton name={data.name} /> {/ ... other UI ... /} </> ); } // InviteButton handles the confirmation flow internally function InviteButton({ name }) { const handleClick = async () => { const canInvite = await overlay.openAsync(({ isOpen, close }) => ( <ConfirmDialog title={Share with ${name}} // ... dialog setup ... /> )); if (canInvite) { await sendPush(); } }; return <Button onClick={handleClick}>Invite</Button>; } `
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster
Works With
Any AI assistant that accepts custom rules or system prompts