DEV Community: Jordan Rudman

Stop Repeating Yourself: Use Rules and Skills to Level Up Your AI Agent

Jordan Rudman — Fri, 08 May 2026 07:49:25 +0000

Do you find yourself typing the same instructions into every new project chat? Or noticing that your agent consistently struggles in certain areas like frontend design, testing, or API patterns? Rules and skills solve exactly that.

Both are markdown files that provide persistent instructions for your agent, so you don't have to re-explain your preferences on every run. When triggered, the agent reads them automatically and incorporates them into its output.

Rules

Rules come in two flavors: global and workspace. Global rules apply across every workspace in your IDE. Workspace rules are scoped to a single project, useful for team conventions or framework-specific patterns. Workspace rules usually override or specialize global behavior.

Each rule also has a trigger type:

Manual: you invoke it explicitly when needed
Always on: the agent references it on every single run
Model decision: the agent decides for itself whether the rule is relevant
Glob: the rule activates only for files matching a pattern, like **/*.go for Go files or **/*.{js,ts,jsx,tsx} for a JS/TS project

Here's an example RULES.md I use for JS/TS projects:

---
trigger: glob
globs: **/*.{js,ts,jsx,tsx}
---

## TypeScript / JavaScript
- TypeScript is the default — never introduce plain `.js` files unless explicitly asked
- Strict mode always: `"strict": true` in tsconfig
- No `any` — use `unknown` and narrow it, or model the type properly
- Prefer `const` over `let`; never use `var`
- Use named exports over default exports
- Async/await over raw Promises; avoid `.then()` chains
- No barrel files (`index.ts` re-exporting everything) unless the project already uses them
- Avoid large synchronous operations on the main thread; prefer streaming over buffering where possible
- Unit tests live alongside source files as `*.test.ts`; E2E/integration tests may live in a dedicated folder.

Skills

Skills are more targeted than rules. When triggered, the agent reads the full skill file and uses it to guide its approach before responding. Each one lives in its own folder under a skills/ parent directory and provides deep guidance on a specific capability. The description you write for each skill is what the agent uses to decide when to invoke it, so it's worth being precise.

Here is a snippet of a frontend skill I use, based on one of Anthropic's Claude skills.

---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
---

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

## Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:
- **Purpose**: What problem does this interface solve? Who uses it?
- **Tone**: Commit to a distinct direction: brutally minimal, maximalist chaos, luxury/refined, lo-fi/zine, dark/moody, soft/pastel, editorial/magazine, brutalist/raw, retro-futuristic, handcrafted/artisanal, organic/natural, art deco/geometric, playful/whimsical, industrial/utilitarian, etc. There are infinite varieties to start from and surpass. Use these as inspiration, but the final design should feel singular, with every detail working in service of one cohesive direction.
- **Constraints**: Technical requirements (framework, performance, accessibility).
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?

**CRITICAL**: Choose a clear conceptual direction and execute it vigorously. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade, functional, and responsive
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail
...

How to get set up

Setting everything up is easy and only takes a few minutes. Most coding tools have a rules and skills section in their settings UI. For Windsurf, it's available under the three dots in the top right of the agent chat. Alternatively, you can create the files directly in the right location.

Skills - each skill is a SKILL.md file inside a named folder:

Windows: C:/Users/[username]/.codeium/windsurf/skills/[skill-name]/SKILL.md
Mac/Linux: ~/.codeium/windsurf/skills/[skill-name]/SKILL.md

Global rules - a single file:

Windows: C:/Users/[username]/.codeium/windsurf/memories/global_rules.md
Mac/Linux: ~/.codeium/windsurf/memories/global_rules.md

Workspace rules - stored in your project folder:

.windsurf/[rule-name].md

A couple of things to remember when creating files manually:

Rules files need a trigger block at the top (see the example above)
Skill files need a name and description in their frontmatter - that's how the agent knows when to use them

You can also find many pre-written rules and skills online, like this GitHub repo. Most modern coding agents support some variation of rules and reusable skills/prompts, though the exact format and triggering behavior differs between tools.

Pitfalls to keep in mind

Too many always-on rules dilute adherence. If every rule is always active, the agent's context fills up fast and it starts glossing over instructions. Be selective — reserve "always on" for truly universal conventions and use glob or manual triggers for everything else.
Conflicting rules create inconsistent outputs. If your global rules say "prefer functional components" and a workspace rule says "use class components for stateful logic," the agent will make a judgment call — and it won't always be the one you want. Audit your rules occasionally to make sure they don't contradict each other.
Overly specific skills can reduce creativity. A skill that prescribes every decision leaves no room for the agent to adapt to context. Aim to set direction and constraints, not a step-by-step recipe — the best skills explain why something matters, not just what to do.
Huge skill files increase context usage and latency. Every time a skill is invoked, its full content is loaded into the agent's context window. A 5,000-word skill file is expensive. Keep skills focused on one capability and trim anything that doesn't directly affect output.
Agents sometimes cargo-cult rule text instead of reasoning. This is the subtle one. An agent that's told "always use named exports" might apply that rule mechanically in situations where it doesn't make sense, without understanding the tradeoff. Phrasing rules with brief rationale ("...because default exports make refactoring harder") helps the agent apply judgment rather than just pattern-match.

Good agents aren’t just about model quality anymore. A big part of the experience comes from the environment you build around them: rules, skills, context, and constraints. A few well-written files can dramatically change the consistency and quality of outputs across an entire project.

Thanks for reading! Rules and skills are one of those small setup investments that pay off fast, especially on longer projects where consistency matters. If you have any skills or resources worth sharing, drop them in the comments below!

The Email I Almost Ignored That Saved My GitHub Repo

Jordan Rudman — Fri, 02 Jan 2026 21:52:50 +0000

Just the other day, a mysterious email landed in my inbox warning me that I had leaked sensitive information in one of my GitHub repositories. Since it came from a sender I didn’t recognize, my first instinct was to ignore it. Still, curiosity got the better of me, so I decided to check the repository myself.

Sure enough, the email was right. I had accidentally committed my settings.json file from a new project, which contained my Snowflake login credentials. If someone with malicious intent had discovered it first, the consequences could have been serious: losing access to my Snowflake account, exposing personal data, or even racking up fraudulent charges on my credit card.

At that point, I took a closer look at the email itself. It turned out to be from GitGuardian, and after a quick search, I found plenty of similar stories. Developers accidentally push secrets to GitHub all the time. According to this blog post from GitHub, they found 39 million secret leaks in 2024. That’s an absurd amount of sensitive information potentially exposed to anyone who knows how to look for it.

Configuration files, environment variables, and test credentials routinely slip into commits, especially during rapid development or prototyping. Simply making the repo private or deleting/modifying the file in GitHub isn’t enough either; the secret still exists in the repository’s git history and can be recovered. The only real fix is to revoke or rotate whatever credentials were exposed. But sometimes you have no idea that you leaked anything at all and that a fix is required.

This is where GitGuardian comes in. GitGuardian automatically scans repositories for leaked secrets and alerts the repository owner as soon as it detects an issue.

I went ahead and created an account, and I ended up thoroughly impressed with the product. I was surprised by how quickly I could see exactly what had been exposed, where it lived in the repository, and why it was flagged. GitGuardian also offers preventative tools to stop secrets from ever being pushed in the first place. Since this isn’t a mistake I make often, I chose to rely on their alert system instead, so I can respond immediately if something slips through.

When you connect GitGuardian to your GitHub account, it will continuously monitor your repositories for exposed secrets and clearly report what was leaked, along with its location. All of this is presented in a clean, intuitive, and informative UI that makes remediation straightforward instead of stressful.

This experience was a reminder that security incidents don’t always come from sophisticated attacks. They often stem from small, human mistakes. Tools like GitGuardian don’t eliminate those mistakes entirely, but they dramatically reduce the time between "oops" and "fixed," which is often what matters most. If you’re a developer working with GitHub, this is one of those tools you hope you’ll never need, but you’ll be glad it’s there when you do.

I’m not affiliated with GitGuardian in any way, just a user who was impressed enough by the product to give it a shoutout. You can check it out and get started for free here. I hope this helps you keep your secrets safe.

Thanks for reading. Have you ever been alerted to a security mistake you didn’t even know you made? Do you use any tools to scan your repositories for mistakes? Let me know in the comments!

Stop Hard-Coding API Keys: Why You Need Environment Variables Right Now

Jordan Rudman — Fri, 31 Jan 2025 20:58:15 +0000

Have you ever built a project using an API that you wanted to post in a public repository so that you can share your code with the world? Perhaps you hard-coded in your API key and called it good. Well, did you know that there are malicious actors out there who use tools to scan public repositories for API keys? Without the proper security measures, they can have access to your secret key and do a number of things with it, including shutting down your service entirely. But no need to fear, environment variables are here to save the day!

Step 1: Create a `.env` File

In your project folder, create a file called .env at the same level as your /src directory. Inside this file, you’ll store your API key. The standard naming convention is all caps with words separated by underscores. If you're using React, the name must start with REACT_APP_. Here’s what a valid .env file can look like:

API_KEY=your_api_key_here

REACT_APP_API_KEY=your_react_api_key_here

Step 2: Access the Environment Variable

Next, in the file where you want to use the API key, create a variable that references your .env file like this:

const apiKey = process.env.REACT_APP_API_KEY;

Now you can use the apiKey variable to represent your API key while keeping it hidden.

Step 3: Add `.env` to `.gitignore`

Finally, ensure your .env file is not uploaded to your repository by adding it to your .gitignore file:

.gitignore

.env

Pro Tips:

Restart Your Development Server: Remember to restart your development server after making changes to your .env file. Otherwise, your changes won’t take effect!
Frontend Security Limitation: While .env files are great for hiding keys during development, remember that environment variables used in React are embedded in the build and can be accessed by anyone who inspects the client-side code. For truly sensitive keys, consider using a backend server to handle API requests.

Example Usage:

Here’s how you might use the apiKey variable in an API call with fetch:

const fetchData = async () => {
  const apiKey = process.env.REACT_APP_API_KEY;
  const response = await fetch(`https://api.example.com/data?api_key=${apiKey}`);
  const data = await response.json();
  console.log(data);
};

Wrap-up

And just like that, your API keys are safe and you may share your code online without worry. Give it a try in your next project and let me know how it goes! Do you have another good way of hiding API keys? Share it down below- I’d love to hear your thoughts!

Easily Render PDFs in React!

Jordan Rudman — Thu, 30 Jan 2025 02:20:20 +0000

Insert a PDF in your project in minutes!

Have you ever wanted a quick and easy way to render a PDF in React? Look no further than react-pdf. It provides a fast and simple method to beautifully display any pdf just like an image.

First, install react-pdf. Below are examples of how to do so with npm, yarn, and bun. Please note Bun is not officially supported by react-pdf, but many users report it works well.

npm

npm install @react-pdf/renderer --save

Yarn

yarn add @react-pdf/renderer

Bun

bun add @react-pdf/renderer

Next, make sure you have your necessary imports. I will also be using a Box component from MUI as I find it gives good control over how my components look. The following code is at the top of my Resume.js file from the resume page on my personal website.

import React from 'react';
import { pdfjs, Document, Page } from 'react-pdf';
import { Box } from "@mui/material";

Now, you can insert your PDF! Make sure the PDF that you wish to display is in your /public folder. Then, render it in the file you are working with in /src. The code framework is as follows, where you can change the filename and desired size:

<Document file={{ url: process.env.PUBLIC_URL + '/file.pdf' }}>
    <Page size="A4" />
</Document>

This is how I have worked it into my code for my personal website.

<Box>
    <div style={{ maxWidth: '800px', margin: '0 auto', maxHeight: '1025px', overflow: 'hidden', marginBottom: '20px' }}>
        <Document file={{ url: process.env.PUBLIC_URL + '/resume.pdf' }}>
            <Page pageNumber={1} width={800} />
        </Document>
    </div>
</Box>

For more information on react-pdf's components and their props, visit their documentation page here.

🎵 🎵 🎵

Thank you for reading! What project are you working on that needs a PDF insertion? Did react-pdf work well for you? Have a better method? Let me know down below!

Music, Programming, and You 🎵

Jordan Rudman — Wed, 03 Jan 2024 08:33:50 +0000

Enhance Your Work Focus with Alternative Sounds

If you're like me and love music but tend to get distracted from work by your favorite tunes, check out this list of other sources of sonic bliss to use while you grind.

1. Music for Programmers

Over 100 hours of music tailored to programmers? Yes, please. No account necessary, completely free with no ads, and a cool interface make this site a no-brainer to turn to for some background audio. New "episodes" added occasionally.

2. Lo-fi Music

Fun, relaxing sounds that won't overstimulate your brain while you code. There's a reason the Lo-fi girl has been the go-to for thousands of people over the years and is still widely popular. Endless playlists throughout YouTube and Spotify are also available, so find some that you like!

3. Brain.fm

If you want something more robust, there's no better place to turn than brain.fm. Scientifically proven (yes, really) to help you focus better, brain.fm provides a customizable experience with loads of great tracks and a simple UI.

4. Video Game Soundtracks

This one might be controversial, but I've found some games have fantastic OSTs for focusing. My personal favorite is the music from Risk of Rain 2 (check it out on Spotify here). You can often find these soundtracks in their entirety on YouTube or Spotify.

5. Ambient Noise

Want to switch it up? Try throwing on some calming sounds like rain, forest ambiance, or beach noise. Often used to aide sleep, these sounds can also help increase focus and concentration while working. Just don't fall asleep at your computer!

🌟🌟🌟

Enhancing your work focus can be as simple as finding the right sonic companion. Give these alternatives a try, and let the music lead you to a more productive and focused work environment. I've personally found these alternatives to be game-changers in improving my work focus. Experiment with each one and discover what works best for you!

What's your favorite work music alternative? Share your thoughts and recommendations in the comments below. Thanks for reading!

9 Tools to Use for Your Next Website

Jordan Rudman — Wed, 08 Nov 2023 07:31:26 +0000

Whether you're embarking on a new web project or seeking to enhance existing ones, having the right set of tools at your disposal can make all the difference. Here are nine of my favorite tools that I currently use to boost productivity and supercharge my websites' performance.

Design

Coolors.co + Canva color wheel
Crafting an eye-catching and harmonious color scheme is a breeze with Coolors. This tool offers beautifully curated color sets rooted in color theory. To further customize your palette, the Canva color wheel is your creative playground. Bid farewell to dull and uninspiring websites!
LOGO.com
Need an outstanding logo but lack design skills or extra time? Simply describe your vision, and LOGO.com will bring it to life with professional flair.
Framer
Elevate your website design with Framer by creating buttery-smooth animations that captivate your audience.

Development
Favic-o-matic
Don't overlook the details – give your website a polished touch with a custom favicon generated effortlessly by Favic-o-matic.
Rulers Guides
In the world of web development, precision is paramount. Rulers Guides makes it easy to align elements with pixel-perfect accuracy.
Ceaser
Enrich your website with stunning CSS animations, all within your grasp through the user-friendly interface of Ceaser.

Performance
DOM Monster
Boost your website's performance and loading speed by optimizing its Document Object Model (DOM) structure.
CSS Stress Test
Uncover and resolve performance bottlenecks within your CSS code using the insights provided by CSS Stress Test.
Better Uptime
Keep your website running seamlessly with Better Uptime, a tool that continuously monitors your site's uptime and promptly alerts you to any issues.

🌟🌟🌟

With these powerful tools at your disposal, you'll be well-equipped to create, refine, and maintain a top-notch website. Whether you're focused on design, development, or performance optimization, these tools offer a range of features and functionalities to meet your specific needs.

In conclusion, these 9 tools are essential for anyone involved in building and maintaining websites. They save you time, enhance the user experience, and keep your site performing at its best. Don't hesitate to explore these tools and incorporate them into your web development toolkit to create websites that shine in terms of design, functionality, and performance. Your website visitors will thank you for it!

Web Design Wonderland: 10 Portfolio Inspirations to Elevate Your Site 🚀

Jordan Rudman — Sun, 01 Oct 2023 19:31:09 +0000

Looking for some inspiration for your own portfolio website or other projects? Just want to check out some well-designed sites? Look no further than these 10 digital portfolios that are bound to get your creative juices flowing. ✨

1) Jo Ash Sakula

With a satisfying intro animation and an interesting horizontal-scrolling projects section, Jo's portfolio is sure to captivate visitors right from the start.

2) Effy Zhang

Effy's portfolio is a perfect example of a single-page portfolio—simple yet effective and infused with personal flair.

3) Robin Clediere

As an experienced designer, Robin's portfolio boasts an elegant layout with a seamless flow, eliminating distractions.

4) Timothy Achumba

Timothy's portfolio resembles a high-end fashion magazine layout, bringing an air of sophistication to your screen.

5) Grace Larosa

Grace's portfolio exudes elegance and refinement. Similar to Robin's, it flows gracefully, offering just the right blend of style without overwhelming.

6) Damjan Stankovic

Damjan's portfolio stands out with its innovative approach. His homepage proudly showcases his projects, and the navigation element in the bottom right adds a unique touch.

7) Ram Maheshwari

Ram's portfolio can be described in one word: clean. It presents everything with crystal-clear precision, combining features and functionality seamlessly.

8) Jonnie Hallman

While simplicity is often praised, Jonnie's portfolio is an exception. It impresses with beautiful animations that seamlessly enhance the user experience.

9) Karolina Szczur

Karolina's site is organized into different pages, which works brilliantly. Each section has its dedicated space, making it easy for visitors to find what they need.

10) Matt Farley

Matt's portfolio has served as a significant inspiration to me. It is fun, friendly, and informative, providing everything you need to know about him and his projects, along with testimonials from peers— all just a scroll away.

🌟🌟🌟

Thanks for reading my first DEV post! I'm excited to share my learning as I journey into the world of web development.